@extends('firm._layouts.master')

@section('css')

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css">

    <style>

        html {
            background-color : whitesmoke;
        }

        code {
            font-size     : 12px;
            font-weight   : 400;
            display       : block;
            max-width     : 100%;
            overflow      : hidden;
            padding       : 2rem;
            margin        : 2rem;
            border-radius : 6px;
        }

        .hljs {
            white-space : pre-wrap;
        }

        .example {
            display  : block;
            width    : 100%;
            overflow : hidden;
        }

        h1, h2, h3, h4, h5, h6 {
            margin : 3rem 1rem 1rem 2rem;
        }

        li {
            padding   : .2rem 1rem;
            font-size : 1.1rem;
        }

        .nav {
            margin : 2rem;
        }

        .source, .source * {
            user-select : text !important;
        }

    </style>
@endsection

@section('content')

    <ul class="nav"></ul>

    <main id="components">

        {{------------------------------------------------------------------------------------------------------------------------------- Buttons --}}
        <section>
            <h1 id="buttons">
                Buttons
            </h1>

            <div class="example">
                <a id="checkout-btn" class="tableTotalDetails">
                    <img src="/assets/firm/images/dollar.svg" class="productFeatureNameDetail">
                </a>
            </div>

            <div class="example">
                <a class="tableTotalDetails cancel-all">
                    <img src="/assets/firm/images/cancel.svg" class="productFeatureNameDetail">
                </a>
            </div>

            <div class="example">
                <button type="button" class="btn btn-secondary btn-sm">Small Button</button>
                <button type="button" class="btn btn-primary">Normal Button</button>
                <button type="button" class="btn btn-primary btn-lg">Large button</button>
            </div>

            <div class="example">
                <button type="button" class="btn btn-primary">Primary</button>
                <button type="button" class="btn btn-secondary">Secondary</button>
                <button type="button" class="btn btn-success">Success</button>
                <button type="button" class="btn btn-danger">Danger</button>
                <button type="button" class="btn btn-warning">Warning</button>
                <button type="button" class="btn btn-info">Info</button>
                <button type="button" class="btn btn-light">Light</button>
                <button type="button" class="btn btn-dark">Dark</button>

                <button type="button" class="btn btn-link">Link</button>
            </div>

            <div class="example">
                <button type="button" class="btn btn-outline-primary">Primary</button>
                <button type="button" class="btn btn-outline-secondary">Secondary</button>
                <button type="button" class="btn btn-outline-success">Success</button>
                <button type="button" class="btn btn-outline-danger">Danger</button>
                <button type="button" class="btn btn-outline-warning">Warning</button>
                <button type="button" class="btn btn-outline-info">Info</button>
                <button type="button" class="btn btn-outline-light">Light</button>
                <button type="button" class="btn btn-outline-dark">Dark</button>
            </div>

            <div class="example">
                <div class="btn-group btn-group-lg" role="group" aria-label="Basic example">
                    <button type="button" class="btn btn-outline-secondary active">Left</button>
                    <button type="button" class="btn btn-outline-secondary">Middle</button>
                    <button type="button" class="btn btn-outline-secondary">Right</button>
                </div>
            </div>

        </section>

        {{-------------------------------------------------------------------------------------------------------------------------------- Inputs --}}
        <section>
            <h1 id="inputs">
                Inputs
            </h1>

            <div class="example">
                <input class="form-control form-control-lg" type="text" placeholder=".form-control-lg">
                <input class="form-control" type="text" placeholder="Default input">
                <input class="form-control form-control-sm" type="text" placeholder=".form-control-sm">
            </div>


            <div class="example">
                <div class="input-group mb-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text" id="basic-addon1">@</span>
                    </div>
                    <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
                </div>
            </div>

            <div class="example mb-3">
                <label for="example-form-control" class="form-label">Example Label</label>
                <input type="text" class="form-control" id="example-form-control" placeholder="example textbox">
            </div>
        </section>

        {{-------------------------------------------------------------------------------------------------------------------------------- Tables --}}
        <section>
            <h1 id="tables">
                Tables
            </h1>

            <div class="example">
                <table class="table table-hover table-striped table-bordered">
                    <thead class="thead-dark">
                    <tr>
                        <th scope="col">#</th>
                        <th scope="col">First</th>
                        <th scope="col">Last</th>
                        <th scope="col">Handle</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <th scope="row">1</th>
                        <td>Mark</td>
                        <td>Otto</td>
                        <td>@mdo</td>
                    </tr>
                    <tr>
                        <th scope="row">2</th>
                        <td>Jacob</td>
                        <td>Thornton</td>
                        <td>@fat</td>
                    </tr>
                    <tr>
                        <th scope="row">3</th>
                        <td colspan="2">Larry the Bird</td>
                        <td>@twitter</td>
                    </tr>
                    </tbody>
                </table>
            </div>

        </section>
        {{------------------------------------------------------------------------------------------------------------------------------------------}}

    </main>

@endsection

@section('scripts')

    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>

    <script>

        let $components, $mainSections

        $(function () {
            $components = $('.components')
            $nav        = $('.nav')

            $mainSections = $components.find('section')

            $mainSections.each(function () {
                let $section = $(this)
                let $heading = $section.find('h1').first()

                if ($heading) {
                    $nav.append(
                        $('<li>', {
                            html: $('<a>', {
                                href: '#' + $heading.attr('id'),
                                text: $heading.text(),
                            })
                        })
                    )
                }

            })

            // create code blocks from .example html
            $('.example').each(function () {
                let $example = $(this)

                let html = removeCodePadding($example.html()) + "\n"

                html = limitCodeLines(html, 10)

                let $source = $('<code>', {
                    class: 'source tml',
                    text : html,
                })

                $source.insertAfter($example)

                hljs.highlightBlock($source[0])
            })

        })

        function limitCodeLines(html, numLines) {
            // split the lines
            let lines = html.split("\n")

            if (lines.length > numLines) {
                lines.splice(numLines / 2, lines.length - numLines, "\n...\n")
            }

            // return the end product as string by gluing the trimmed parts with new line character again
            return lines.join("\n")
        }

        function removeCodePadding(html) {

            // split the lines
            let lines = html.split("\n")

            // sample the amount of padding from the first line
            let firstLine     = lines[1]
            // replace leading whitespaces and then compare the length to find amount of padding
            let paddingAmount = false

            // eliminate up to 'paddingAmount' of padding (spaces) from the beginning of each line.
            $.each(lines, function (index, value) {
                if (!paddingAmount) {
                    if (!value.length) return

                    paddingAmount = value.length - (value.replace(/^\s+/, '')).length
                }

                let regex = new RegExp("^ {1," + paddingAmount + "}", "g")

                lines[index] = value.replace(regex, '')
            })

            // return the end product as string by gluing the trimmed parts with new line character again
            return lines.join("\n")
        }

    </script>

@endsection