{% extends "base.html" %}
{% block main_content %}


{# use tmpl-series-div as a template & keep it hidden always #}
<div id="tmpl-series-div" class="col input-group" style="display:none">
	<button id="series-minus-but-NUM" class="btn btn-outline-danger input-group-prepend" type="button">
		<svg width="22" height="22" fill="currentColor">
			<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
		</svg>
	</button>
	<input type="hidden" id="bsl-book_id-NUM" name="bsl-book_id-NUM" value="{{books.id}}">
	<span class="form-control col-2 input-group-text">Book&nbsp;</span>
	<input type="text input-group-text" id="bsl-book_num-NUM" name="bsl-book_num-NUM" class="form-control col-1" placeholder="number">
	<span class="form-control col-1 input-group-text">&nbsp;of&nbsp;</span>
	<select class="form-select col" id="bsl-series_id-NUM" name="bsl-series_id-NUM">
	{% for s in poss_series_list %}
		<option value="{{s.id}}">{{s.title}}</option>
	{% endfor %}
	</select>
	<button id="series-plus-but-NUM" class="btn btn-outline-success input-group-append" type="button" onClick="AddBookToSeries()">
		<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
	</button>
</div id="tmpl-series-div">

<script>

// when we choose a new author from the drop-down list, then we need to change
// the associated href
function ChgAuth(cnt)
{
    aid=$("#author-"+cnt).val()
    console.log("new auth id="+aid)
    $("#author-edit-"+cnt).attr( 'onclick', "window.location.href='/author/" + aid + "'" )
}

function ConfirmRemoveParentAndSubsFromSeries(pid,bid,rem)
{
	$('#dbox-title').html('Confirm: Removing Parent Book from Series')
	if( rem.length > 1 )
		all='<span style="background:red" class="text-white"><em>ALL</em></span>'
	else
		all='this '
	div=`
		<div class="row col-12">
		<p class="lead">You have chosen to remove this (parent) book from a series.
			What should we do with the sub-books for 
		`
	div += all
	div += `
		series?</p>
		</div class="row">
		<div class="row col-12">
		<button id="RPS" class="btn btn-primary col-2">Remove all children</button>
		<button onClick="$('#dbox').modal('hide')" 
			class="btn btn-outline-danger offset-8 col-2"> Cancel Series change</button>
		</div class="row">
	`
	$('#dbox-content').html(div)
	$('#dbox').modal('show') 
	// have to do this AFTER modal show otherwise it doesnt exist... (grrr)
	$('#RPS').attr( 'onClick', "$('#dbox').modal('hide') ; $.post( '/rem_parent_books_from_series/" +pid + "' ) ; window.location='/book/"+ bid + "'" )
}

function ConfirmRemoveThisSubs_ParentAndSubsFromSeries(pid,bid,rem)
{
	$('#dbox-title').html('Confirm: Removing Sub Book from Series')
	div=`
		<div class="row col-12">
		<p class="lead">You have chosen to remove this (sub) book from a series.
			What should we do with the sub-books <span id="RPS-text"></span>
		</p>
		</div class="row">
		<div class="row col-12">
		<button id="RPS" class="btn btn-primary col"></button>
		<button id="RPS-one" onClick="alert('not yet')" class="btn btn-outline-primary col"></button>
		<button onClick="$('#dbox').modal('hide')" class="btn btn-outline-danger col">
			Cancel Series change</button>
		</div class="row">
	`
	if( rem.length > 1 )
	{
		all='for <span style="background:red" class="text-white"><em>ALL</em></span> series'
		b_RPS="Remove parent and all children too " + all
		b_RPS_one="Remove just this (sub) book " + all
	}
	else
	{
		all='for this series '
		b_RPS="Remove parent and all children too" 
		b_RPS_one="Remove just this (sub) book"
	}
	$('#dbox-content').html(div)
	$('#dbox').modal('show')
	// have to do this AFTER modal show otherwise it doesnt exist... (grrr)
	$('#RPS-text').html(all)
	$('#RPS').html(b_RPS)
	$('#RPS').attr( 'onClick', "$('#dbox').modal('hide') ; $.post( '/rem_parent_books_from_series/" +pid + "' ) ; window.location='/book/"+ bid + "'" )
	$('#RPS-one').html(b_RPS_one)
	$('#RPS-one').attr( 'onClick', "$('#dbox').modal('hide') ; $.post( '/rem_parent_books_from_series/" +bid + "' ) ; window.location='/book/"+ bid + "'" )
}

function AddBookToSeries() {

    // Read the Number from that DIV's ID (i.e: 3 from "series-div-3") -- could
	// also be the filler (series-div-0), thats ok too
	var last_div = $('div[id^="series-div-"]:last');
    var num = parseInt( last_div.prop("id").match(/\d+/g), 10 );

console.log( "num=" + num )
console.log( "last_div is=" + last_div.prop('id') )

	// adding means at least one, so remove filler (even if its removed already) & remove active plus div, new_div below will have active plus
	$('#series-div-0').hide();
	last_div.find('#series-plus-but-'+num).prop( 'disabled', true )
	last_div.find('#series-plus-but-'+num).addClass( 'disabled' )
	
	// if we have more than 1 series, lets fix the buttons (haven't inc'd num yet)
	if( num > 0 ) {
		// disable minus and plus button in 'active' row
		last_div.find('#series-minus-but-'+num).addClass('disabled')
		last_div.find('#series-minus-but-'+num).prop('disabled', true )
		last_div.find('#series-plus-but-'+num).addClass('disabled')
		last_div.find('#series-plus-but-'+num).prop('disabled', true )
console.log( "reset buttons on last_div is=" + last_div.prop('id') )
	}

	// clone the template
	var new_div = $('#tmpl-series-div').clone()
	num++

	// reset id/names to new series-div- created (for id on div, name on select
	// for series_id and input text for book_num, and plus/minus divs&buttons)
	new_div.prop('id', 'series-div-'+num );
	new_div.find('#bsl-book_id-NUM').prop('name', 'bsl-book_id-'+num )
	new_div.find('#bsl-series_id-NUM').prop('name', 'bsl-series_id-'+num )
	new_div.find('#bsl-book_num-NUM').prop('name', 'bsl-book_num-'+num )
	new_div.find('#series-plus-but-NUM').prop('id', 'series-plus-but-'+num )
	new_div.find('#series-minus-but-NUM').prop('id', 'series-minus-but-'+num )
	new_div.find('#series-minus-but-'+num).attr('onclick', "RemoveBookFromSeries('series-div-"+num+"')" )

	// insert new_div after the old div
	last_div.after( new_div );
	new_div.show()
}

function RemoveBookFromSeries(sid) {
	$('#'+sid).remove()

	var num = parseInt( sid.match(/\d+/g), 10 );
	// move real DB data or delete 'new' bsl data (its appended outside of div to avoid bootstrap issues)
	if( $('input:hidden[name=bsl-series_id-'+num+']').length )
	{
		$('[name=bsl-book_id-'+num+']').attr('name', 'removed-book_id-'+num)
		$('[name=bsl-series_id-'+num+']').attr('name', 'removed-series_id-'+num)
		$('[name=bsl-book_num-'+num+']').attr('name', 'removed-book_num-'+num)
	}
	else
	{
		$('[name=bsl-book_id-'+num+']').remove()
		$('[name=bsl-series_id-'+num+']').remove()
		$('[name=bsl-book_num-'+num+']').remove()
	}

	if( sid == 'series-div-1' ) {
		console.log("remove Book: and it was the only series, so hide series-div-1 and put 'plus / empty' div back" )
		$('#series-div-0').show();
		console.log("okay, there prob. is a div-0, but no plus button, need to add it back like below")
	} else { 
		console.log("remove Book: and there are more than 1 'new' series (not in DB), so delete this one")
		//now find 'last div still visible, re-enable its minus button and add back plus button
		var div = $('div[id^="series-div-"]:last');
		var num = parseInt( div.prop("id").match(/\d+/g), 10 );
		div.find('#series-minus-but-'+num).removeClass('disabled')
		div.find('#series-minus-but-'+num).prop('disabled', false )
		div.find('#series-plus-but-'+num).removeClass('disabled')
		div.find('#series-plus-but-'+num).prop('disabled', false )
	}
}

function RemoveAuthorFromBook(num) {
	console.log("remove an author at slot: " + num )
	$('#author-'+num).remove()
	$('#author-rem-'+num).remove()
}
function AddAuthorToBook(num) {
	console.log("insert a new author at slot: " + num )
	div = `
			<button id="author-rem-NUM" class="btn btn-outline-danger input-group-append" type="button" onClick="RemoveAuthorFromBook(NUM)">
				<svg width="22" height="22" fill="currentColor">
					<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
				</svg>
			</button>
			<select class="form-select" name="author-NUM" id="author-NUM">
				{% for auth in author_list %}
					{% set aname=auth.surname+", "+auth.firstnames %}
					<option value="{{auth.id}}">{{aname}}</option>
				{% endfor %}
			</select>
	`
	div=div.replace( /NUM/g, num )
	$('#author-plus').prev().after(div)
	new_add_func_str='AddAuthorToBook('+(num+1)+')'
	$('#author-plus').attr( 'onclick', new_add_func_str )
	$('#author-rem-'+num).hover( 
		function() { $('#author-'+num).prop( 'style', 'color:red' ) }, 
		function() { $('#author-'+num).prop( 'style', '' ) } )

}
</script>

{% set keys = [ 'title', 'bals', 'publisher', 'genre', 'owned', 'covertype', 'condition', 'year_published', 'rating', 'notes', 'blurb' ] %}
<div class="container-fluid">
	<div class="form-row"><h3 class="offset-2">{{page_title}}</h3></div>
    {% if books.loan|length %}
    <div class="row" id="loan-row">
	<div class="col-10" id="main-row">
    {% else %}
	<div class="col-12" id="main-row">
    {% endif %}
		<form role="form" class="form" action="" method="POST">
			{{ book_form.id }}
        	{{ book_form.csrf_token }}
			{% if b.parent %}
				<div class="form-row">
				<div class="input-group">
					<label class="input-group-text col-2 col-form-label bg-secondary text-white"><i>Parent Book:</i></label>
					<div class="col">
						<span class="col-12 d-flex h-100 border rounded-end border-primary">
							<i class="col-12 d-flex h-100 justify-content-center"><a href="/book/{{b.parent.id}}">{{b.parent.title}}</a></i>
						</span>
					</div>
					<input type="hidden" name="parent_id" value="{{b.parent.id}}">
					<input type="hidden" name="parent_title" value="{{b.parent.title}}">
				</div>
				</div>
			{% endif %}
			{% for key in keys %}
				<div class="form-row input-group">
                    {% if key == "bals" %}
                        <label for="author(s)" class="input-group-text col-2 justify-content-end">author(s):</label>
                    {% else %}
                        <label for="{{key}}" class="input-group-text col-2 justify-content-end">{{key}}:</label>
                    {% endif %}
					{% if key == "genre" %}
							<div class="row col-10">
								{% for genre in genre_list %}
									<div class="form-control col">
										<input id="genre-{{genre.id}}" name="genre-{{genre.id}}" type="checkbox"
										{% for book_g in books.genre %}
											{% if book_g['name'] == genre.name %}
												checked
											{% endif %}
										{% endfor %}
										></input>
										<label style="display:inline" for="{{genre.name}}" class="col-form-label">{{genre.name}}</label>
									</div>
								{% endfor %}
							</div>
					{% elif key == "bals" %}
                        {% set cnt = namespace(idx=1) %}
                        {% for a in books[key] %}
                            {% if cnt.idx > 1 %}
                                <button id="author-rem-{{cnt.idx}}" class="btn btn-outline-danger input-group-append" type="button" onClick="RemoveAuthorFromBook({{cnt.idx}})">
                                    <svg width="22" height="22" fill="currentColor">
                                        <use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
                                    </svg>
                                </button>
                            {% endif %}
                            <button id="author-edit-{{cnt.idx}}" class="btn" type="button" onclick="window.location.href='/author/{{a.author.id}}'">
                                    <svg width="22" height="22" fill="currentColor">
                                        <use xlink:href="{{url_for('static', filename='icons.svg')}}#edit"/>
                                    </svg>
                            </button>
                            <select class="form-select input-group-append" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}" onChange="ChgAuth({{cnt.idx}})">
                            {% for auth in author_list %}
                                {% set aname=auth.surname+", "+auth.firstnames %}
                                <option value="{{auth.id}}"
                                    {% if a.author.id == auth.id %}
                                        selected
                                    {% endif %}
                                    >{{aname}}</option>
                                {% endfor %}
                            </select>
                            {% set cnt.idx = cnt.idx+1 %}
                        {% endfor %}
                        {# if idx is still 1, then no authors - new book, just put one there - book HAS to have an author #}
                        {% if cnt.idx == 1 %}
                                <select class="form-select input-group-append" name="author-1" id="author-1">
                                    {% for auth in author_list %}
                                        {% set aname=auth.surname+", "+auth.firstnames %}
                                        <option value="{{auth.id}}">{{aname}}</option>
                                    {% endfor %}
                                </select>
                            <button id="author-plus" class="btn btn-outline-success input-group-append" type="button" onClick="AddAuthorToBook(2)">
                        {% else %}
                            <button id="author-plus" class="btn btn-outline-success input-group-append" type="button" onClick="AddAuthorToBook({{cnt.idx}})">
                        {% endif %}
                        <svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
                        </button>
					{% else %}
							{% set rows=4 %}
							{% if key == "notes" %}
								{% set rows=2 %}
							{% endif %}
							{% if b.parent and 
								(key == 'publisher' or key == 'owned' or key == 'covertype' 
								or key == 'condition' or key == 'blurb' )  %}
								{{book_form[key](class="form-control", rows=rows, disabled="disabled" )}}
								{# disabled fields do not come through in form post, so add hidden to make it work #}
									<input type="hidden" name="{{key}}" value="{{book_form[key].data}}">
							{% elif key == 'publisher' or key == 'owned' or key == 'covertype' 
								or key == 'condition' or key == 'rating' %}
									{{book_form[key](class="form-select input-group-append" )}}
							{% else %}
									{{book_form[key](class="form-control input-group-append", rows=rows )}}
							{% endif %}
					{% endif %}
				</div class="form-row input-group">
			{% endfor %}
			<div id="series_row" class="form-row">
				<label for="series" class="col-2 col-form-label">Series:</label>
				{# putting hidden inputs in between input-groups breaks formatting, so use this var to collect them and add just before form ends #}
				{% set hiddens=namespace(txt='') %}
				{% if books.series|length %}
					{# empty-series-dev - filler -- we use 0 AND use that number to keep track of how many series divs for add/remove #}
					<div id="series-div-0" class="form-row col mx-0 input-group" style="display:none">
						<span class="form-control input-group-text bg-white"> </span>
						<button id="series-plus-but-0" class="btn btn-outline-success input-group-append" type="button" onClick="AddBookToSeries()">
							<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
						</button>
					</div id="series-div-0" class="form-row col mx-0 input-group">
					{% for s in books.series %}
						{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-book_id-{}' value='{}'>".format(loop.index, books.id) %}
						{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-series_id-{}' value='{}'>".format(loop.index,s.id) %}
						<div id="series-div-{{loop.index}}" class="col input-group">
						{% if SeriesBookNum( s.id, books.id ) %}
							{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-book_num-{}' value='{}'>".format(loop.index, SeriesBookNum( s.id, books.id )) %}
							{% if books.series|length > loop.index %}
								{% set disabled=" disabled" %}
							{% else %}
								{% set disabled="" %}
							{% endif %}
								<button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger input-group-prepend {{disabled}}" {{disabled}} type="button" 
									onClick="RemoveBookFromSeries('series-div-{{loop.index}}')">
									<svg width="22" height="22" fill="currentColor">
										<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
									</svg>
								</button>
							<span class="form-control input-group-text bg-white">
								Book {{ SeriesBookNum( s.id, books.id ) }} of {{s.num_books}} in&nbsp; <a href=/series/{{s.id}}>{{s.title}}</a>
							</span>
						{% else %}
							{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-book_num-{}' value='PARENT'>".format(loop.index) %}
							<button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger input-group-prepend" type="button" onClick="RemoveBookFromSeries('series-div-{{loop.index}}')">
								<svg width="22" height="22" fill="currentColor">
									<use xlink:href="{{url_for('static', filename='icons.svg')}}#minus"/>
								</svg>
							</button>
							<span class="form-control input-group-text bg-white">
								Contains books in&nbsp; <a href='/series/{{s.id}}'>{{s.title}}</a>
							</span>
						{% endif %}
						<button id="series-plus-but-{{loop.index}}" class="btn btn-outline-success input-group-append {{disabled}}" {{disabled}} type="button" onClick="AddBookToSeries()">
							<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
						</button>
						{% if books.series|length == loop.index %}
						{% endif %}
						</div id="series-div-{{loop.index}}">
					{% endfor %}
					{% set show_div_0 = 0 %}
				{% else %}
					{# empty-series-dev - filler -- we use 0 AND use that number to keep track of how many series divs for add/remove #}
					<div id="series-div-0" class="col input-group">
						<span class="form-control input-group-text bg-white"> </span>
						<button id="series-plus-but-0" class="btn btn-outline-success input-group-append" type="button" onClick="AddBookToSeries()">
							<svg width="22" height="22" fill="currentColor"><use xlink:href="{{url_for('static', filename='icons.svg')}}#plus"/></svg>
						</button>
					</div id="series-div-0" class="form-row col mx-0 input-group">
				{% endif %}
			</div id="series_row">
		{% if books.child_ref|length %}
			<div class="form-row">
				<label class="col-2 col-form-label">Sub Books:</label>
				<div class="col" id="sub_book_content">
				</div>
			</div>
		{% endif %}
		<div id="spacer"><br></div>
		<div class="form-row">
			<div class="form-row col mx-0">
				{{ book_form.submit( class="btn btn-primary offset-2 col-2" )}}
				{% if 'Edit' in page_title %}
					{% if GetOwnedById(b.owned) != 'Currently Owned' %}
						{{ book_form.delete( class="btn btn-outline-danger col-2" )}}
					{% else %}
						<span class="col-2" tabindex="0" data-toggle="tooltip" 
							title="Cannot Delete while the book is still 'Currently Owned'">
						{{ book_form.delete( class="btn btn-outline-danger col-2 disabled", disabled="true", style="pointer-events: none;" )}}
						</span>
					{% endif %}
				{% endif %}
			</div class="form-row">
		</div class="form-row">
		{{ hiddens.txt|safe }}
		</form>
	</div class="row" id="main-row">
		{% if books.loan|length %}
			<div class="col">
				<div class="card border-primary">
					<div class="card-header bg-primary text-white">Loaned to</div>
						<div class="card-body text-primary">
							<h5 class="card-title">{{books.loan[0].firstnames}} {{books.loan[0].surname}}</h5>
						    <p class="card-text">
								When: {{books.loan[0].date_lent}}<br>
								Contact: {{books.loan[0].contact_details}}
						</div class="card-body">
					</div class="card-header">
				</div class="card">
			</div class="col">
		{% endif %}

		{% if 'Edit' in page_title %}
            {% if books.loan|length %}
			<div class="form-row col-10">
			{% else %}
			<div class="form-row">
			{% endif %}
			{% if b.parent %}
				<form role="form" class="form" action="{{url_for('new_book')}}" method="POST">
					<input type="hidden" name="add_sub_parent_id" value="{{books.id}}">
					{{ book_form.add_sub( class="btn btn-outline-success offset-2 col-2" )}}
				</form>
			{% else %}
				<form role="form" class="form" action="{{url_for('remove_sub_book')}}" method="POST">
					<input type="hidden" name="rem_sub_sub_book_id" value="{{books.id}}">
					<input type="hidden" name="rem_sub_parent_id" value="{{b.parent.id}}">
					{{ book_form.rem_sub( class="btn btn-outline-danger offset-2 col-3" )}}
				</form>
			{% endif %}
			</div class="form-row">
	</div class="row" id="main-row">
		{% endif %}
        {% if books.loan|length %}
        </div class="loan-row">
        {% endif %}
</div class="container">

{% endblock main_content %}
{% if books.child_ref|length %}
{% endif %}
	{% block script_content %}
		<script>
			$(document).ready( function() {
				$('[data-toggle="tooltip"]').tooltip()
				$("#sub_book_content").load("/subbooks_for_book/{{books.id}}")
				{% if CheckSeriesChange is defined and CheckSeriesChange != None %}
					{% if CheckSeriesChange.type == 'parent' %}
						ConfirmRemoveParentAndSubsFromSeries( {{CheckSeriesChange.pid}}, {{CheckSeriesChange.bid}},
							{{CheckSeriesChange.removing_series|safe}} )
					{% else %}
						ConfirmRemoveThisSubs_ParentAndSubsFromSeries( {{CheckSeriesChange.pid}}, {{CheckSeriesChange.bid}},
							{{CheckSeriesChange.removing_series|safe}} )
					{% endif %}
				{% endif %}
				{% set cnt = namespace(idx=1) %}
				{% for authors in books['bals'] %}
					$('#author-rem-{{cnt.idx}}').hover( 
						function() { 
                            $('#author-{{cnt.idx}}').prop( 'style', 'color:red' )
                            $('#author-edit-{{cnt.idx}}').prop(  'style', 'color:red' )
                        }, 
						function() { 
                            $('#author-{{cnt.idx}}').prop( 'style', '' ) 
                            $('#author-edit-{{cnt.idx}}').prop( 'style', '' ) 
                        }
                    )
                    $('#author-edit-{{cnt.idx}}').hover(
						function() { $('#author-{{cnt.idx}}').prop( 'style', 'color:blue' ) },
						function() { $('#author-{{cnt.idx}}').prop( 'style', '' ) }
                    )
					{% set cnt.idx = cnt.idx+1 %}
				{% endfor %}
                $('#owned').click( function() { if( $("#owned option:selected").text() == 'On Wish List' ) { $('#covertype').val( $('#covertype option:last').val() ); $('#condition').val( $('#condition option:last').val() ); $('#year_published').val(''); $('#rating').val( $('#rating option:last').val() ) } } )
			} )
		</script>
	{% endblock script_content %}