{% 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">
	<div id="series-minus-div-NUM" class="input-group-prepend">
		<button id="series-minus-but-NUM" class="btn btn-outline-danger" type="button"><i class="fas fa-minus"></i></button>
	</div>
	<input type="hidden" id="bsl-book_id-NUM" name="bsl-book_id-NUM" value="{{books.id}}">
	<span class="form-control col-2">Book&nbsp;</span>
	<input type="text" id="bsl-book_num-NUM" name="bsl-book_num-NUM" class="form-control col-1" placeholder="number">
	<span class="form-control col-1">&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>
	<div id="series-plus-div-NUM" class="input-group-append">
		<button id="series-plus-but-NUM" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button>
	</div>
</div id="tmpl-series-div">

<script>

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 SeriesButPlus(num) {
	return '<div id="series-plus-div'+num+'" class="input-group-append"><button id="series-plus-but-'+num+'" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button></div>'
}

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-div-'+num).remove()
	
	// if we have more than 1 series, lets fix the buttons (haven't inc'd num yet)
	if( num > 0 ) {
		// disable minus button and hide plus button in old div
		last_div.find('#series-minus-but-'+num).addClass('disabled')
		last_div.find('#series-minus-but-'+num).prop('disabled', true )
		//remove completely this plus button so it draws correctly in the input group
		last_div.find('#series-plus-div'+num).remove()
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-div-NUM').prop('id', 'series-plus-div-'+num )
	new_div.find('#series-plus-but-NUM').prop('id', 'series-plus-but-'+num )
	new_div.find('#series-minus-div-NUM').prop('id', 'series-minus-div-'+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.append( SeriesButPlus( (num+1) ) )
	}
}

function RemoveAuthorFromBook(num) {
	console.log("remove an author at slot: " + num )
	$('#auth-div-'+num).remove()
}
function AddAuthorToBook(num) {
	console.log("insert a new author at slot: " + num )
	div = `
	<div id="auth-div-NUM" class="col input-group px-0">
			<div class="input-group-prepend">
				<button class="btn btn-outline-danger" type="button" onClick="RemoveAuthorFromBook(NUM)"><i class="fas fa-minus"></i></button>
			</div>
			<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=div.replace( /NUM/g, num )
	$('#auth-div-'+(num-1)).after( div )
	new_add_func_str='AddAuthorToBook('+(num+1)+')'
	$('#author-plus').attr( 'onclick', new_add_func_str )
}
</script>

{% set keys = [ 'title', 'author', 'publisher', 'genre', 'owned', 'covertype', 'condition', 'year_published', 'rating', 'notes', 'blurb' ] %}
<div class="container-fluid">
	<div class="form-row col-10"><h3 class="offset-2">{{page_title}}</h3></div>
	<div class="row" id="main-row">
		<form role="form" class="form col-10" action="" method="POST">
			{{ book_form.id }}
        	{{ book_form.csrf_token }}
			{% if b.parent|length %}
				<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[0].id}}">{{b.parent[0].title}}</a></i>
						</span>
					</div>
					<input type="hidden" name="parent_id" value="{{b.parent[0].id}}">
					<input type="hidden" name="parent_title" value="{{b.parent[0].title}}">
				</div>
				</div>
			{% endif %}
			{% for key in keys %}
				<div class="form-row">
					<div class="input-group">
					<label for="{{key}}" class="input-group-text col-2 justify-content-end">{{key}}:</label>
					{% 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 == "author" %}
						<div class="form-row col mx-0">
							{% set cnt = namespace(idx=0) %}
							{% for objects in books[key] %}
								<div id="auth-div-{{cnt.idx}}" class="col input-group px-0">
									{% if cnt.idx > 0 %}
										<div class="input-group-prepend">
											<button class="btn btn-outline-danger" type="button" onClick="RemoveAuthorFromBook({{cnt.idx}})"><i class="fas fa-minus"></i></button>
										</div>
									{% endif %}
									<select class="form-select" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
									{% for auth in author_list %}
										{% set aname=auth.surname+", "+auth.firstnames %}
										<option value="{{auth.id}}"
										{% if books.author[cnt.idx].id == auth.id %}
											selected
										{% endif %}
										>{{aname}}</option>
									{% endfor %}
									</select>
								</div class="col">
								{% set cnt.idx = cnt.idx+1 %}
							{% endfor %}
							{% if cnt.idx == 0 %}
								<div id="auth-div-{{cnt.idx}}" class="col input-group px-0">
									<select class="form-select" name="author-{{cnt.idx}}" id="author-{{cnt.idx}}">
										{% for auth in author_list %}
											{% set aname=auth.surname+", "+auth.firstnames %}
											<option value="{{auth.id}}">{{aname}}</option>
										{% endfor %}
									</select>
								</div class="col">
							{% endif %}
							<div class="input-group-append">
								<button id="author-plus" class="btn btn-outline-success" type="button" onClick="AddAuthorToBook({{cnt.idx}})"><i class="fas fa-plus"></i></button>
							</div>
						</div class="form-row">
					{% else %}
						<div class="col">
							{% set rows=4 %}
							{% if key == "notes" %}
								{% set rows=2 %}
							{% endif %}
							{% if b.parent|length 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" )}}
							{% else %}
									{{book_form[key](class="form-control", rows=rows )}}
							{% endif %}
						</div class="col">
					{% endif %}
					</div class="input-group">
				</div class="form-row">
			{% 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>
						<div id="series-plus-div-0" class="input-group-append">
							<button id="series-plus-but-0" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button>
						</div>
					</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 %}
							<div id="series-minus-div-{{loop.index}}" class="input-group-prepend disabled" >
								<button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger {{dsiabled}}" {{disabled}} type="button" 
									onClick="RemoveBookFromSeries('series-div-{{loop.index}}')">
									<i class="fas fa-minus"></i>
								</button>
							</div>
							<div 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>
							</div>
						{% else %}
							{% set hiddens.txt=hiddens.txt+"<input type='hidden' name='bsl-book_num-{}' value='PARENT'>".format(loop.index) %}
							<div id="series-minus-div-{{loop.index}}" class="input-group-prepend">
								<button id="series-minus-but-{{loop.index}}" class="btn btn-outline-danger" type="button" onClick="RemoveBookFromSeries('series-div-{{loop.index}}')">
									<i class="fas fa-minus"></i>
								</button>
							</div>
							<div class="form-control input-group-text bg-white">
								Contains books in&nbsp; <a href='/series/{{s.id}}'>{{s.title}}</a>
							</div>
						{% endif %}
						{% if books.series|length == loop.index %}
							<div id="series-plus-div-{{loop.index}}" class="input-group-append">
								<button id="series-plus-but-{{loop.index}}" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()">
									<i class="fas fa-plus"></i>
								</button>
							</div>
						{% 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="form-row col mx-0 input-group">
						<span class="form-control input-group-text bg-white"> </span>
						<div id="series-plus-div-0" class="input-group-append">
							<button id="series-plus-but-0" class="btn btn-outline-success" type="button" onClick="AddBookToSeries()"><i class="fas fa-plus"></i></button>
						</div>
					</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) == 'Sold' %}
						{{ book_form.delete( class="btn btn-outline-danger col-2" )}}
					{% else %}
						<span class="col-2" tabindex="0" data-toggle="tooltip" 
							title="Cannot Delete unless the book is saved as Sold">
						{{ book_form.delete( class="btn btn-outline-danger col disabled", disabled="true", style="pointer-events: none;" )}}
						</span>
					{% endif %}
				{% endif %}
			</div class="form-row">
		</div class="form-row">
		{{ hiddens.txt|safe }}
		</form>
		{% 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 %}
	</div class="row" id="main-row">

		{% if 'Edit' in page_title %}
			<div class="form-row">
			{% if b.parent|length == 0 %}
				<form role="form" class="form col-10" 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 col-10" 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[0].id}}">
					{{ book_form.rem_sub( class="btn btn-outline-danger offset-2 col-3" )}}
				</form>
			{% endif %}
			</div class="form-row">
		{% endif %}
</div class="container">

{% endblock main_content %}
{% if books.child_ref|length %}
	{% 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 %}
			} )

		</script>
	{% endblock script_content %}
{% endif %}