<script src="./index.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script src="./index.js"></script>

import Aftok.Modals as Modals
import Aftok.Modals.ModalFFI as ModalFFI

  | SaveBillable

    HH.form_
      [ HH.div
        [ P.classes (ClassName <$> ["form-group"]) ]
        [ HH.label 
          [ P.for "billableName", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]
          [ HH.text "Bill Name:" ] 
        , HH.input
          [ P.type_ P.InputText
          , P.classes (ClassName <$> [ "form-control-sm" ])
          , P.id_ "billableName"
          , P.placeholder "A name for the product or service you want to bill for"
          , P.required true
          , P.autofocus true
          , E.onValueInput (Just <<< SetName)
          ]
        , HH.label 
            [ P.for "billableDesc", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]
            [ HH.text "Bill Description:" ] 
        , HH.input
            [ P.type_ P.InputText
            , P.classes (ClassName <$> [ "form-control-sm" ])
            , P.id_ "billableDesc"
            , P.placeholder "Description of the product or service"
            , P.required true
            , P.autofocus true
            , E.onValueInput (Just <<< SetDesc)
            ]
        , HH.label 
            [ P.for "billableMsg", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]
            [ HH.text "Message to be included with bill:" ] 
        , HH.input

    Modals.modal "createBillable" "Create Billable" SaveBillable
      [ HH.form_
        [ HH.div
          [ P.classes (ClassName <$> ["form-group"]) ]
          [ HH.label 
            [ P.for "billableName", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]
            [ HH.text "Bill Name:" ] 
          , HH.input

            , P.id_ "billableMsg"
            , P.placeholder "Description of the product or service"

            , P.id_ "billableName"
            , P.placeholder "A name for the product or service you want to bill for"

            , E.onValueInput (Just <<< SetDesc)

            , E.onValueInput (Just <<< SetName)

          , HH.label 
              [ P.for "billableDesc", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]
              [ HH.text "Bill Description:" ] 
          , HH.input
              [ P.type_ P.InputText
              , P.classes (ClassName <$> [ "form-control-sm" ])
              , P.id_ "billableDesc"
              , P.placeholder "Description of the product or service"
              , P.required true
              , P.autofocus true
              , E.onValueInput (Just <<< SetDesc)
              ]
          , HH.label 
              [ P.for "billableMsg", P.classes (ClassName <$> ["font-weight-bold", "mb-1"] )]
              [ HH.text "Message to be included with bill:" ] 
          , HH.input
              [ P.type_ P.InputText
              , P.classes (ClassName <$> [ "form-control-sm" ])
              , P.id_ "billableMsg"
              , P.placeholder "Description of the product or service"
              , P.required true
              , P.autofocus true
              , E.onValueInput (Just <<< SetDesc)
              ]
          ]

      SaveBillable -> 
        lift $ system.toggleModal "createBillable" ModalFFI.HideModal

                  , Modals.modal "createBillable" "Create Billable"
                    [ HH.slot
                        _createBillable
                        unit
                        (Create.component system caps.createBillable)
                        (unwrap p).projectId
                        (Just <<< BillableCreated)
                    ]

                  , system.portal
                      _createBillable
                      unit
                      (Create.component system caps.createBillable)
                      (unwrap p).projectId
                      Nothing
                      (Just <<< BillableCreated)

exports.toggleModalInternal = modalId => toggle => () => {
  $('#' + modalId).modal(toggle)
}

module Aftok.Modals.ModalFFI
  ( toggleModal
  , Toggle(..)
  ) where
import Prelude (Unit)
import Effect (Effect)
data Toggle
  = ShowModal
  | ToggleModal
  | HideModal
toggleModal :: String -> Toggle -> Effect Unit
toggleModal modalId t =
  let toggleStr = case t of
        ShowModal -> "show"
        ToggleModal -> "toggle"
        HideModal -> "hide"
   in toggleModalInternal modalId toggleStr
foreign import toggleModalInternal :: String -> String -> Effect Unit

import Data.Maybe (Maybe(..))

import Halogen as H

import Halogen.HTML.Events as E

modal :: forall w i. String -> String -> Array (HH.HTML w i) -> HH.HTML w i
modal modalId title contents =

modal :: 
  forall action slots m. 
  String -> 
  String -> 
  action ->
  Array (H.ComponentHTML action slots m) -> 
  H.ComponentHTML action slots m
modal modalId title submit contents =

            , E.onClick (\_ -> Just submit)

import Data.Symbol (class IsSymbol, SProxy)

import Type.Row as Row

import Routing.Hash as H

import Web.HTML (HTMLElement)
import Routing.Hash as RH
import Halogen as H
import Halogen.HTML as HH
import Halogen.Portal (portalAff)
import Aftok.Modals.ModalFFI as ModalFFI

    , portal :: 
      forall query action input output slots label slot _1.
        Row.Cons label (H.Slot query output slot) _1 slots =>
        IsSymbol label =>
        Ord slot =>
        Monad m =>
        SProxy label ->
        slot ->
        H.Component HH.HTML query input output m ->
        input ->
        Maybe HTMLElement ->
        (output -> Maybe action) ->
        H.ComponentHTML action slots m
    , toggleModal :: String -> ModalFFI.Toggle -> m Unit

  , getHash: liftEffect H.getHash
  , setHash: liftEffect <<< H.setHash

  , getHash: liftEffect RH.getHash
  , setHash: liftEffect <<< RH.setHash

  , portal: portalAff
  , toggleModal: \i t -> liftEffect (ModalFFI.toggleModal i t)