{% extends "base/app.html" %}
{% load static %}

{% block content %}
<link rel="stylesheet" type="text/css" href="{% static 'css/setup/branch/lists.css' %}" />
<div class="card card-secondary m-4">
    <div class="card-header">
        <h3 class="card-title">Branch Listing</h3>
    </div>
    <!-- /.card-header -->
    <div class="card-body">
        <div class="card">
            <div class="card-header border-0">
                <h3 class="card-title"><i class="fa fa-search"></i>Filter</h3>
                <div class="card-tools">
                    <a href="#" class="btn btn-tool btn-sm">
                        <i class="fas fa-download"></i>
                    </a>
                    <a href="#" class="btn btn-tool btn-sm">
                        <i class="fas fa-bars"></i>
                    </a>
                </div>
            </div>
            <div class="card-body">
                <form id="form-search">
                    <div class="row">
                        <div class="col-sm-6 col-md-8 col-lg-9 col-xl-9">
                            <div class="input-group mb-3">
                                <input type="text" id="in-search" name="branch_name" class="form-control rounded-0"
                                    placeholder="enter branch name">
                                <span class="input-group-append">
                                    <button type="button" class="btn btn-info btn-flat" id="btn-search">Search</button>
                                </span>
                            </div>
                        </div>
                        <!-- <div class="col-sm-6 col-md-4 col-lg-3 col-xl-3">
                            <button type="button" class="btn btn-outline-danger btn-flat" id="btn-clear"><i class="fa fa-eraser"></i> Clear</button>
                        </div> -->
                        <div class="col-sm-6 col-md-4 col-lg-3 col-xl-3">
                            <button type="button" class="btn btn-outline-info btn-flat" id="btn-new"><i
                                    class="fa fa-folder-open"></i> New</button>
                            <button type="button" class="btn btn-outline-danger btn-flat" id="btn-clear"><i
                                    class="fa fa-eraser"></i> Clear</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="box-body">
            <table>
                <thead class="thead-default">
                    <tr class="striped bg-info">
                        <th scope="col">CODE</th>
                        <th scope="col">NAME</th>
                        <th scope="col">ADDRESS</th>
                        <th scope="col">CONTACT</th>
                        <th scope="col">STATUS</th>
                        <th scope="col">ACTION</th>
                    </tr>
                </thead>
                <tbody class="tb-md" id="tbl-branch">
                    <tr class="tr-default">
                        <td colspan="6">Empty Record. Click button to search.</td>
                    </tr>
                </tbody>

            </table>
        </div>
    </div>
    <!-- /.card-body -->
</div>

<div class="modal fade" id="modal-branch" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <i class="fa fa-folder-open"></i>
                    <span></span>
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="modal-form-branch">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Name</label>
                                <input type="text" class="form-control" name="in-name"
                                    placeholder="Enter Branch Name...">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Address</label>
                                <input type="text" class="form-control" name="in-address" id="in-address"
                                    placeholder="Enter Branch Address...">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Contact</label>
                                <input type="text" class="form-control" name="in-contactno" id="in-contactno"
                                    placeholder="Enter Branch Contact...">
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Select from gallery</label>
                                <select class="form-control select2" style="width: 100%;" id="sel-gallery">
                                </select>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
            <div class="modal-footer justify-content-between">
                <button type="button" class="btn btn-default" data-dismiss="modal"><i class="fa fa-window-close"></i>
                    Close</button>
                <button type="button" class="btn btn-primary" id="btn-save">
                    <i class="fa fa-floppy"></i> Save changes</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<select id="sel-clone-gallery" class="hidden" name="sel-clone-gallery"></select>
{% endblock %}

{% block javascript %}
{{ block.super }}

<script src="{% static 'js/setup/branch/lists.js' %}"></script>

{% endblock %}