<?= $this->extend('Modules\Admin\Views\index'); ?>
<?= $this->section('content');?>
<div class="container-fluid">
<div class="row mb-md-3">
	<div class="col">
		<h4>Add Slide</h4>
		<!-- Breadcrumb !-->
		<nav aria-label="breadcrumb"><small>
			<ol class="breadcrumb mb-0">
				<li class="breadcrumb-item"><a href="<?= base_url('administrator') ?> ">Home</a></li>
                <li class="breadcrumb-item"><a href="<?= base_url('administrator/sliders/all') ?> ">All Slides</a></li>
				<li class="breadcrumb-item active" aria-current="page"><?= esc($bcrumb) ?> </li>
			</ol></small>
		</nav>
		<!-- End Breadcrumb !-->
	</div>
</div>
<!-- print success message !-->
<div class="row">
    <div class="col">

			<!-- print success message !-->
			<?php if(session()->getTempdata('success')): ?>
				<div class="alert alert-success" role="alert"><?= session()->getTempdata('success');?></div>
				<?php endif;?>
			<!-- print failure message !-->
			<?php if(session()->getTempdata('error')): ?>
				<div class="alert alert-danger" role="alert"><?= session()->getTempdata('error');?></div>
			<?php endif;?>
            <?php if(isset($validation)): ?>
			<div class="alert alert-danger">
			<?= $validation->listErrors()?>
			</div>
            <?php endif;?>
            <div id="showMsg"></div>
</div></div>
<!-- Create/Slide !-->
<form method="POST" action="<?= base_url('administrator/sliders/add')?>" enctype="multipart/form-data">
<?= csrf_field();?>
    <div class="card rounded-0 shadow-sm">
        <div class="card-header bg-light bg-opacity-100">
            <!-- Save/New/Cancel Btns !-->
            <div class="d-flex bd-highlight align-items-center">
                <div class="p-1 bd-highlight align-items-center">
                    <div class="btn-group border shadow-sm">
                    <button type="button" class="btn bg-success rounded-0"><i class="bi bi-plus-lg text-white"></i></button>
                    <button type="submit" class="btn btn-sm btn-success align-items-center"> &nbsp; Save &nbsp;</button>
                    </div>
                </div>
                <div class="p-1 bd-highlight">
                    <div class="btn-group border shadow-sm">
                    <button type="button" class="btn bg-danger bg-opacity-25 rounded-0"><i class="bi bi-x-lg"></i></button>
                    <button type="reset" class="btn btn-sm btn-danger">Reset</button>
                    </div>
                </div>
                <div class="p-1 bd-highlight">
                    <div class="btn-group border shadow-sm">
                    <button type="button" class="btn bg-primary bg-opacity-25 rounded-0"><i class="bi bi-x-lg"></i></button>
                    <a href="<?= base_url('administrator/sliders/all') ?>" class="btn btn-sm btn-primary">Back to Slides</a>
                    </div>
                </div>
            </div>
            <!-- END Save/New/Cancel Btns !-->
        </div>
        <div class="card-body">
            <div class="row">
                <div class="col-md-6">
                    <div class="mb-3">
                    <label class="form-label"><strong>Title</strong></label>
                    <input type="text" name="title" class="form-control" required>
                    </div>
                    <div class="mb-3">
                    <label class="form-label"><strong>Category</strong></label>
                    <select name="category_id" class="form-select" required>
                        <option value="public" >Select Category</option>
                        <?php foreach($categories as $cat): ?>
                            <option value="<?= $cat->id;?>"><?= $cat->name;?></option>
                        <?php endforeach;?>
                    </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label"><strong>Image Description</strong></label>
                        <textarea name="description" class="form-control"  rows="2" placeholder="Write summary text here.."></textarea>
                    </div>
                    <div class="mb-3">
                    <label class="form-label"><strong>Link Text</strong></label>
                    <input type="text" name="link_text" class="form-control">
                    </div>
                    <div class="mb-3">
                    <label class="form-label"><strong>Link</strong></label>
                    <input type="text" name="link" class="form-control">
                    </div>
                   
                    
                    <div class="accordion accordion-flush" id="accordionFlushExample">
                    <div class="accordion-item">
                        <h2 class="accordion-header" id="flush-headingOne">
                        <button class="accordion-button collapsed bg-primary bg-opacity-25" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
                        <strong>Extra information for your slide. <small class="text-muted"></small></strong>
                        </button>
                        </h2>
                        <div id="flush-collapseOne" class="accordion-collapse collapse" aria-labelledby="flush-headingOne" data-bs-parent="#accordionFlushExample">
                        <div class="accordion-body">
                            <div class="mb-3">
                                <label class="form-label"><strong>Extra Text 1</strong></label>
                                <input type="text" name="extra_1" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label class="form-label"><strong>Extra Text 2</strong></label>
                                <input type="text" name="extra_2" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label class="form-label"><strong>Extra Text 3</strong></label>
                                <input type="text" name="extra_3" class="form-control">
                            </div>
                            <div class="mb-3">
                                <label class="form-label"><strong>Extra Text 4</strong></label>
                                <input type="text" name="extra_4" class="form-control">
                            </div>
                            <h6 class="text-primary">For extra link button</h6>
                            <div class="row"><div class="col-6 mb-3">
                                <label class="form-label"><strong>Link Text 2</strong></label>                   <input type="text" name="link_2_text" class="form-control">                    
                            </div>
                            <div class="col-6 mb-3">
                                <label class="form-label"><strong>Link 2</strong></label>                   <input type="text" name="link_2" class="form-control">
                            </div></div>
                        </div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <!-- Main post params !-->
                  <div class="mb-3">
                  <label class="form-label"><strong>Photo Order</strong></label>
                  <select name="ordering" class="form-select" >
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                    </select>
                  </div>
                  <div class="mb-3">
                    <label class="form-label"><strong>Status</strong></label>
                    <select name="status" class="form-select bg-success bg-opacity-75 text-white" >
                        <option value="Published" >Published</option>
                        <option value="Unpublished">Unpublished</option>
                        <option value="Archived">Archived</option>
                        <option value="Trashed">Trashed</option>
                    </select>
                  </div>
                  <div class="mb-3">
                    <label class="form-label"><strong>Access</strong></label>
                    <select name="access" class="form-select">
                        <option value="Public" >Public</option>
                        <option value="Private">Private</option>
                        <option value="Users">Users</option>
                    </select>
                  </div>
                  <div class="mb-3">
                    <div style="height: 250px; background: #F2F9FF; border-radius: 5px;">
                    <div id="postImgPreview"></div>
                    <small class="d-flex text-muted p-2">Add Photo to post</small>
                    </div>
                    <input type="file" name="photo" id="post_image" class="postImg upload-photo" accept=".jpg, .gif, .png, .tiff, .jpeg, .webp" required>
                  </div>
                <!-- END Main post params  !-->
                </div>
            </div>
                        </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<!-- End Create/Slide !-->
<!---- JS --->
<script src="<?= base_url();?>/assets/js/modules/sliders.js"></script>  
<?= $this->endSection();?>