<?php defined('BASEPATH') OR exit('No direct script access allowed');?>

<style>
.grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.grid-item {
	text-align: center; display: flex; flex-direction: column; justify-content: space-between; row-gap: 20px;
}
.grid-item a {
    background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; row-gap: 7px; text-decoration: none; color: #333; padding: 10px; font-size: 14px; line-height: 1.4; text-align: center;
}
.grid-item a:hover {
    transform: translateY(-5px); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.grid-item a img {
    width: 100%; border-radius: 4px;
}
.grid-item button {
	display: inline-flex; align-items: center; justify-content: center; column-gap: 5px; border-radius: 25px; font-weight: 600; margin-top: auto;
}

@media (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
</style>

<div class="row banner">
	<?php echo img(array('src' => 'images/publish-book-chapter-banner.jpg', 'alt' => 'Publish Book Chapter', 'class' => 'fluid'));?>
</div>
<div class="row main container">
	<div class="col s12 m12 l12">
		<div class="head main center-align"><h1>Publish Book Chapter</h1></div>
	</div>
</div>
<div class="row main container">
	<div class="col s12 m12 l3 book-chapters-sidebar hide-on-med-and-down">
   		<?php require('bookchaptersidebar.php'); ?>
	</div>

	<div class="col s12 m12 l9 publish-book-chapter">
	    <?php echo $page_content;?>

		<br clear="all" />

		<div style="margin-bottom: 20px;border-left: 4px solid #1e88e5;border-radius: 5px;padding: 6px 0 6px 10px;" class="blue lighten-5">
			<b style="font-size: 16px;">Indexed in</b>
		</div>

		<div style="display: flex;column-gap: 10px;row-gap: 10px;flex-wrap: wrap;">
			<img src="<?php echo base_url('images/crossref-logo.png');?>" alt="Indexed in Crossref" title="Indexed in Crossref" style="padding: 10px;height: 50px;background: #eeeeee;flex-shrink: 0;border-radius: 6px;">
			<img src="<?php echo base_url('images/dimensions-logo.png');?>" alt="Indexed in Dimensions" title="Indexed in Dimensions" style="padding: 10px;height: 50px;background: #eeeeee;flex-shrink: 0;border-radius: 6px;">
			<img src="<?php echo base_url('images/bowker-logo.png');?>" alt="Indexed in Bowker" title="Indexed in Bowker" style="padding: 10px;height: 50px;background: #eeeeee;flex-shrink: 0;border-radius: 6px;">
		</div>

		<br clear="all" /><br clear="all" />

		<div style="margin-bottom: 20px;border-left: 4px solid #1e88e5;border-radius: 5px;padding: 6px 0 6px 10px;" class="blue lighten-5">
			<b style="font-size: 16px;">Featured Books</b>
		</div>

		<div class="grid">
			<div class="grid-item">
				<a href="<?php echo base_url('publish-book-chapter/1569477005-advances-in-agricultural-and-life-sciences'); ?>">
				    <img src="<?php echo base_url('uploads/IMG_20191017_031337_BCP.jpg'); ?>" alt="Publish Book Chapter in Advances in Agricultural and Life Sciences" title="Advances in Agricultural and Life Sciences">
					Advances in Agricultural and Life Sciences
				</a>

				<div>
					<button type="button" class="btn-flat blue accent-4 white-text modal-trigger" data-target="publish-book-chapter-enquiry-modal">
						<span class="material-icons" style="font-size: 16px">chat</span><span>Enquiry Now</span>
					</button>
				</div>
			</div>
			<div class="grid-item">
				<a href="<?php echo base_url('publish-book-chapter/1569049343-recent-advances-in-medical-sciences'); ?>">
				    <img src="<?php echo base_url('uploads/IMG_20190921_043914_BCP.jpg'); ?>" alt="Publish Book Chapter in Recent Advances in Medical Sciences" title="Recent Advances in Medical Sciences">
					Recent Advances in Medical Sciences
				</a>

				<div>
					<button type="button" class="btn-flat blue accent-4 white-text modal-trigger" data-target="publish-book-chapter-enquiry-modal">
						<span class="material-icons" style="font-size: 16px">chat</span><span>Enquiry Now</span>
					</button>
				</div>
			</div>
			<div class="grid-item">
				<a href="<?php echo base_url('publish-book-chapter/1598876810-Recent-Research-in-Pharmaceutical-Sciences'); ?>">
				    <img src="<?php echo base_url('uploads/IMG_20200831_055650_BCP.jpg'); ?>" alt="Publish Book Chapter in Recent Research in Pharmaceutical Sciences" title="Recent Research in Pharmaceutical Sciences">
					Recent Research in Pharmaceutical Sciences
				</a>

				<div>
					<button type="button" class="btn-flat blue accent-4 white-text modal-trigger" data-target="publish-book-chapter-enquiry-modal">
						<span class="material-icons" style="font-size: 16px">chat</span><span>Enquiry Now</span>
					</button>
				</div>
			</div>
			<div class="grid-item">
				<a href="<?php echo base_url('publish-book-chapter/1668862608-Recent-Advances-in-Chemical-Sciences'); ?>">
				    <img src="<?php echo base_url('uploads/IMG_20230620_112152_BCP.jpg'); ?>" alt="Publish Book Chapter in Recent Advances in Chemical Sciences" title="Recent Advances in Chemical Sciences">
					Recent Advances in Chemical Sciences
				</a>

				<div>
					<button type="button" class="btn-flat blue accent-4 white-text modal-trigger" data-target="publish-book-chapter-enquiry-modal">
						<span class="material-icons" style="font-size: 16px">chat</span><span>Enquiry Now</span>
					</button>
				</div>
			</div>
		</div>

		<br clear="all" /><br clear="all" />

		<div style="margin-bottom: 20px;border-left: 4px solid #1e88e5;border-radius: 5px;padding: 6px 0 6px 10px;" class="blue lighten-5">
			<b style="font-size: 16px;">Book titles open for chapter submission</b>
		</div>

		<?php
        $results = $this->db->select('subject')->group_by('subject')->order_by('subject', 'asc')->get_where('book_chapters', array('isdeleted' => false))->result();
        foreach($results as $result)
        {
            echo '<ul class="fluid">';
            echo '<li><b>'.$result->subject.'</b>';
            echo '<ul class="fluid">';
            $results1 = $this->db->select('bookname, isbn, volume, pagelink')->order_by('bookname', 'asc')->get_where('book_chapters', array('subject' => $result->subject, 'isdeleted' => false))->result();
            foreach($results1 as $result1)
            {
                echo '<li>'.anchor('publish-book-chapter/'.$result1->pagelink, $result1->bookname.' (Volume - '.$result1->volume.')'.($result1->isbn ? ' <span class="red-text">(ISBN: '.$result1->isbn.')</span>' : '')).'</li>';
            }
            echo '</ul>';
            echo '</li>';
            echo '</ul>';
        }
        ?>
	</div>

	<div class="col s12 m12 l3 book-chapters-sidebar show-on-medium-and-down" style="display:none">
   		<?php require('bookchaptersidebar.php'); ?>
	</div>
</div>

<br clear="all"><br clear="all">

<div class="row main publish-book-page">
	<div class="container">
		<div class="col s12 m12 l6">
			<div class="body main white-text">
				<ul class="amber-text">
					<li>More than 350 books published</li>
					<li>Book will be publish with ISBN</li>
					<li>10-25 page allowed</li>
					<li>Peer Review process</li>
					<li>Publication certificate will be provide to each author</li>
					<li>Low cost charges</li>
					<li>Email book chapter at weserbooks@gmail.com</li>
				</ul>
			</div>
		</div>
		<div class="col s12 m6 l3 center-align">
			<img src="<?php echo base_url('images/book-chapter-guidelines-icon.png');?>" alt="Book Chapter Guidelines" title="Book Chapter Guidelines" />
			<div class="clearfix"></div>
			<?php echo anchor('docs/book-chapter-guidelines.pdf', 'Author Guidelines', 'class="waves-effect btn white black-text" target="_blank"');?>
		</div>
		<div class="col s12 m6 l3 center-align">
			<img src="<?php echo base_url('images/book-chapter-copyright-form-icon.png');?>" alt="Book Chapter Copyright Form" title="Book Chapter Copyright Form" />
			<div class="clearfix"></div>
			<?php echo anchor('docs/book-chapter-copyright-form.pdf', 'Copyright Form', 'class="waves-effect btn white black-text" target="_blank"');?>
		</div>
	</div>
</div>

<div class="modal-bottom">
    <div class="container">
		<a href="<?php echo base_url(); ?>">
			<img src="<?php echo base_url('images/logo.png'); ?>" alt="<?php echo $this->app->websitename; ?>" title="<?php echo $this->app->websitename; ?>" style="height: 36px;" class="logo" />
		</a>

		<button data-target="publish-book-chapter-enquiry-modal" class="btn-flat blue accent-3 white-text modal-trigger">Publication Enquiry</button>
    </div>
</div>

<div id="publish-book-chapter-enquiry-modal" class="modal modal-fixed-footer modal-popup">
	<?php echo form_open_multipart('processor/publishbookchapter', 'name="contactform" onsubmit="return placeEnquiry(this)"');?>
        <input type="hidden" name="zipcode" value="">
        <div class="modal-content" style="padding: 0;overflow: auto;">
            <div class="modal-header blue accent-3 white-text center-align" style="padding: 18px 0;">
                <b style="font-size: 24px;">Book Chapter Publication Enquiry</b>
                <p style="font-size: 16px;">Please provide your contact details.</p>
            </div>
			<div style="padding: 18px 12px;">
				<div class="row">
					<div class="col s12 m6 l6">
						<label for="name" class="form-label">name</label>
						<input type="text" name="name" id="name" class="form-control" required />
					</div>
					<div class="col s12 m6 l6">
						<label for="email" class="form-label">email</label>
						<input type="text" name="email" id="email" class="form-control" required />
					</div>
					<div class="col s12 m6 l6">
						<label for="country" class="form-label">Country</label>
						<select name="country" id="country" class="browser-default form-control" onchange="this.form.phonecode.value = this.value;" required>
							<option value="" selected="selected">Select country</option>
							<?php
							foreach ($this->db->where('phonecode != 0')->get('countries')->result() as $country) {
								echo '<option value="+' . $country->phonecode . '">' . $country->nicename . '</option>';
							}
							?>
						</select>
					</div>
					<div class="col s12 m6 l6">
						<label for="phone" class="form-label">whatsapp number</label>
						<div class="input-group">
							<input type="text" name="phonecode" id="phonecode" value="+91" class="form-control grey lighten-2 center-align" style="width: 60px;" readonly />
							<input type="text" name="phone" id="phone" class="form-control" required />
						</div>
					</div>
					<div class="col s12 m12 l12">
						<label for="message" class="form-label">message</label>
						<textarea rows="5" cols="5" name="message" id="message" class="form-control" style="height: 100px !important;" required></textarea>
					</div>
					<div class="col s12 m12 l12">
						<label for="skycolor" class="form-label">What is color of sky in day? (Anti Spam Question)</label>
						<select name="skycolor" id="skycolor" class="browser-default form-control" required>
							<option value selected>Select sky color</option>
							<option value="blue">Blue</option>
							<option value="black">Black</option>
							<option value="green">Green</option>
							<option value="orange">Orange</option>
						</select>
					</div>
				</div>
			</div>
        </div>
        <div class="modal-footer">
            <button type="button" class="modal-close btn-flat grey darken-1 white-text" onclick="this.form.reset()">Close</button>
            <button type="submit" class="btn-flat blue accent-3 white-text" name="submit">Submit Enquiry</button>
        </div>
	<?php echo form_close();?>
</div>

<script defer>
    window.addEventListener('scroll', function () {
        if (window.scrollY > 100) {
            document.querySelector('.modal-bottom').classList.add('open');
        } else {
            document.querySelector('.modal-bottom').classList.remove('open');
        }
    });

	document.addEventListener('DOMContentLoaded', function () {
		$('#publish-book-chapter-enquiry-modal').modal();

        document.getElementById('phone').addEventListener('input', function(e) {
            let inputValue = e.target.value.replace(/\D/g, '');
            inputValue = inputValue.replace(/^0+/, '');
            e.target.value = inputValue;
        });
	});
    
    function placeEnquiry($this)
    {
        $this.querySelectorAll('button').forEach((e) => {
            e.disabled = true;
        });

        if (document.querySelector('.toast')) {
            document.querySelector('.toast').remove();
        }

        fetch($this.action, {method: 'post', mode: 'same-origin', cache: 'no-cache', headers: {'Accept': 'application/json'}, body: new FormData($this)}).then(r => r.json()).then(r => {
            if (r.text && !r.stat) {
                M.toast({html: r.text, classes: 'red white-text'});
            }
            if (r.text && r.stat === true) {
                M.toast({html: r.text, classes: 'green white-text'}); $this.reset();
                const modalElem = document.getElementById('publish-book-chapter-enquiry-modal');
                const modalInstance = M.Modal.getInstance(modalElem);

                if (modalInstance && modalElem.classList.contains('open')) {
                    modalInstance.close();
                }
            }
        })
        .catch(e => {
            console.log(e);
        })
        .finally(() => {
            $this.querySelectorAll('button').forEach((e) => {
                e.disabled = false;
            });
        });

        return false;
    }
</script>