<?php

/**
 * @author Pratik Dev <webmaster.pratik@gmail.com>
 */
require_once __DIR__ . '/../header.php';
?>
<div class="container-fluid">
    <div class="card shadow mb-4">
        <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">Artists</h6>
        </div>
        <div class="card-body">
            <div class="row justify-content-end">
                <div class="btn-group m-1 m-sm-0" role="group" aria-label="button-group">
                    <button type="button" class="btn btn-info" id="add_artist"><i class="fas fa-user-plus" aria-hidden="true"></i> Add Artist</button>
                </div>
            </div>
            <div class="table-responsive">
                <table id="datalist" name="artist" class="table table-striped table-bordered nowrap artist" width="100%" cellspacing="0">
                    <thead class="bg-info text-white">
                        <tr>
                            <th>Id</th>
                            <th>Thumb</th>
                            <th>Artist Name</th>
                            <th>Status</th>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="modalform" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <form id="artistform">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mlabel">Artist</h5>
                    <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-row">
                        <div class="col-md-12 form-group">
                            <label for="name">Name</label>
                            <input type="text" name="name" id="name" class="form-control">
                        </div>
                        <div class="from-group col-md-6">
                            <label for="File">Thumb:</label>
                            <select name="thumbfrom" class="form-control" id="thumbfrom">
                                <option value="LOCAL">LOCAL</option>
                                <option value="EXTERNAL_LINK">URL</option>
                            </select>
                        </div>

                        <div id="thumb_file_display" class="form-group col-md-6">
                            <label for="thumb">Thumb File:</label>
                            <div class="custom-file">
                                <label for="thumb" class="custom-file-label">Choose File</label>
                                <input type="file" name="thumb" class="custom-file-input" id="thumbfile" />
                            </div>
                        </div>
                        <div id="thumb_url_display" style="display: none;" class="form-group col-md-6">
                            <label for="File">Thumb URL:</label>
                            <div class="input-group">
                                <input type="text" class="form-control" name="thumb_url" id="thumb_url" placeholder="Enter Valid URL">
                            </div>
                        </div>
                        <div class="col-md-4 text-center">
                            Watermark Postion:
                            <div>
                                <input type="radio" name="w_pos" value="top-left" checked>
                                <input type="radio" name="w_pos" value="top">
                                <input type="radio" name="w_pos" value="top-right"><br>
                                <input type="radio" name="w_pos" value="left">
                                <input type="radio" name="w_pos" value="center">
                                <input type="radio" name="w_pos" value="right"><br>
                                <input type="radio" name="w_pos" value="bottom-left">
                                <input type="radio" name="w_pos" value="bottom">
                                <input type="radio" name="w_pos" value="bottom-right"><br>
                            </div>
                        </div>
                        <div id="thumbnail" style="display: none;">
                            <div class="col-12">
                                <div>Thumbnail:</div>
                                <div>
                                    <img src="" class="img-thumbnail" id="thumb" alt="thumbnal" width="200" height="200">
                                    <button type="button" class="removethumb btn btn-danger">Delete</button>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-8 form-group">
                            <label for="name">Title</label>
                            <input type="text" name="meta_title" id="meta_title" class="form-control">
                        </div>

                        <div class="col-md-12 form-group">
                            <label for="meta_keyw">Keywords</label>
                            <input type="text" name="meta_keyw" id="meta_keyw" class="form-control">
                        </div>
                        <div class="col-md-12 form-group">
                            <label for="meta_des">Description</label>
                            <input type="text" name="meta_des" id="meta_des" class="form-control">
                        </div>

                        <div class="form-group col-12">
                            <label for="added_home">Featured:</label>
                            <input type="checkbox" class="form-control" data-toggle="switch" id="added_home" name="added_home" value="1" />

                            <label for="status">Status:</label>
                            <input type="checkbox" class="form-control" id="status" data-toggle="switch" name="status" value="1" checked />
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <input type="hidden" name="id" id="id" value="" />
                    <input type="hidden" name="submit" id="action" value="create" />
                    <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
                    <button type="submit" id="submit" class="btn btn-primary">Submit</button>
                </div>
            </div>
        </form>
    </div>
</div>
<?php
require_once __DIR__ . '/../footer.php';
?>