@extends('layouts.dashboard')
@section('content')
    <section id="multiple-column-form">
        <div class="row match-height">
            <div class="col-12">
                <div class="card">
                    <div class="card-header">
                        <h4 class="card-title">Set Messages</h4>
                    </div>

                    <div class="card-content">
                        <div class="card-body">
                            <form action="{{ route('birthday.updateMaster', $masters->id) }}" method="POST"
                                enctype="multipart/form-data">
                                @csrf
                                @method('PUT')
                                <div class="form-body">
                                    <div class="row">
                                        <div class="col-md-4">
                                            <label>Devices</label>
                                        </div>
                                        <div class="col-md-8 form-group">
                                            <select name="devices_id" id="devices_id" class="form-control">
                                                <option>Pilih Sessions</option>
                                                @foreach ($device as $devices)
                                                    <option value="{{ $devices->id }}">{{ $devices->name }}
                                                    </option>
                                                @endforeach
                                            </select>
                                        </div>
                                        <div class="col-md-4" id="imageInput1">
                                            <label for="imageFile">Gambar</label>
                                        </div>
                                        <div class="col-md-8 form-group" id="imageInput">
                                            <input type="file" name="url" id="imageFile" class="form-control">
                                        </div>
                                        <div class="col-md-4" id="textInput">
                                            <label for="messageInput">Template Pesan</label><br>
                                            <small class="text-muted"><i>Selamat Ulang tahun Nama Customer...(Template
                                                    Pesan)</i></small>
                                        </div>
                                        <div class="col-md-8 form-group" id="textInput1">
                                            <textarea name="text" id="messageInput" class="form-control" cols="30" rows="10">{{ $masters->text }}</textarea>
                                        </div>
                                        <div class="col-md-4">
                                            <label>Auto Send</label>
                                        </div>
                                        <div class="col-md-8 form-group switch-container">
                                            <label class="switch switch-flat">
                                                <input class="switch-input" type="checkbox" name="auto_send">
                                                <span class="switch-label" data-on="On" data-off="Off"></span>
                                                 <span class="switch-handle"></span>
                                                 </label>

                                        </div>
                                        <div class="col-sm-12 d-flex justify-content-end">
                                            <button type="submit" class="btn btn-primary me-1 mb-1">Submit</button>
                                            <button type="reset" class="btn btn-light-secondary me-1 mb-1">Reset</button>
                                        </div>
                                    </div>
                                </div>
                            </form>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection
@push('style')
<style>
    .switch {
        position: relative;
        display: block;
        vertical-align: top;
        width: 100px;
        height: 30px;
        padding: 3px;
        margin:0;
        background: linear-gradient(to bottom, #eeeeee, #FFFFFF 25px);
        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF 25px);
        border-radius: 18px;
        box-shadow: inset 0 -1px white, inset 0 1px 1px rgba(0, 0, 0, 0.05);
        cursor: pointer;
      box-sizing:content-box;
    }
    .switch-input {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
      box-sizing:content-box;
    }
    .switch-label {
        position: relative;
        display: block;
        height: inherit;
        font-size: 10px;
        text-transform: uppercase;
        background: #eceeef;
        border-radius: inherit;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.15);
      box-sizing:content-box;
    }
    .switch-label:before, .switch-label:after {
        position: absolute;
        top: 50%;
        margin-top: -.5em;
        line-height: 1;
        -webkit-transition: inherit;
        -moz-transition: inherit;
        -o-transition: inherit;
        transition: inherit;
      box-sizing:content-box;
    }
    .switch-label:before {
        content: attr(data-off);
        right: 11px;
        color: #aaaaaa;
        text-shadow: 0 1px rgba(255, 255, 255, 0.5);
    }
    .switch-label:after {
        content: attr(data-on);
        left: 11px;
        color: #FFFFFF;
        text-shadow: 0 1px rgba(0, 0, 0, 0.2);
        opacity: 0;
    }
    .switch-input:checked ~ .switch-label {
        background: #E1B42B;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15), inset 0 0 3px rgba(0, 0, 0, 0.2);
    }
    .switch-input:checked ~ .switch-label:before {
        opacity: 0;
    }
    .switch-input:checked ~ .switch-label:after {
        opacity: 1;
    }
    .switch-handle {
        position: absolute;
        top: 4px;
        left: 4px;
        width: 28px;
        height: 28px;
        background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
        background-image: -webkit-linear-gradient(top, #FFFFFF 40%, #f0f0f0);
        border-radius: 100%;
        box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    .switch-handle:before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -6px 0 0 -6px;
        width: 12px;
        height: 12px;
        background: linear-gradient(to bottom, #eeeeee, #FFFFFF);
        background-image: -webkit-linear-gradient(top, #eeeeee, #FFFFFF);
        border-radius: 6px;
        box-shadow: inset 0 1px rgba(0, 0, 0, 0.02);
    }
    .switch-input:checked ~ .switch-handle {
        left: 74px;
        box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
    }
    /* Switch Left Right
    ==========================*/
    .switch-left-right .switch-label {
        overflow: hidden;
    }
    .switch-left-right .switch-label:before, .switch-left-right .switch-label:after {
        width: 20px;
        height: 20px;
        top: 4px;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 11px 0 0 0;
        text-indent: -12px;
        border-radius: 20px;
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
    }
    .switch-left-right .switch-label:before {
        background: #eceeef;
        text-align: left;
        padding-left: 80px;
    }
    .switch-left-right .switch-label:after {
        text-align: left;
        text-indent: 9px;
        background: #FF7F50;
        left: -100px;
        opacity: 1;
        width: 100%;
    }
    .switch-left-right .switch-input:checked ~ .switch-label:before {
        opacity: 1;
        left: 100px;
    }
    .switch-left-right .switch-input:checked ~ .switch-label:after {
        left: 0;
    }
    .switch-left-right .switch-input:checked ~ .switch-label {
        background: inherit;
    }
    /* Switch Flat
    ==========================*/
    .switch-flat {
        padding: 0;
        background: #FFF;
        background-image: none;
    }
    .switch-flat .switch-label {
        background: #FFF;
        border: solid 2px #eceeef;
        box-shadow: none;
    }
    .switch-flat .switch-label:after {
        color: #0088cc;
    }
    .switch-flat .switch-handle {
        top: 6px;
        left: 6px;
        background: #dadada;
        width: 22px;
        height: 22px;
        box-shadow: none;
    }
    .switch-flat .switch-handle:before {
        background: #eceeef;
    }
    .switch-flat .switch-input:checked ~ .switch-label {
        background: #FFF;
        border-color: #0088cc;
    }
    .switch-flat .switch-input:checked ~ .switch-handle {
        left: 72px;
        background: #0088cc;
        box-shadow: none;
    }
    /* Switch Yes No
    ==========================*/
    .switch-yes-no {
        padding: 0;
        margin: 15px 0 0;
        background: #FFF;
        border-radius: 0;
        background-image: none;
    }
    .switch-yes-no .switch-label {
        box-shadow: none;
        background: none;
    }
    .switch-yes-no .switch-label:after, .switch-yes-no .switch-label:before {
        width: 100%;
        height: 70%;
        top: 5px;
        left: 0;
        text-align: center;
        padding-top: 10%;
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
    }
    .switch-yes-no .switch-label:after {
        color: #FFFFFF;
        background: #32CD32;
        backface-visibility: hidden;
        transform: rotateY(180deg);
    }
    .switch-yes-no .switch-label:before {
        background: #eceeef;
        backface-visibility: hidden;
    }
    .switch-yes-no .switch-handle {
        display: none;
    }
    .switch-yes-no .switch-input:checked ~ .switch-label {
        background: #FFF;
        border-color: #0088cc;
    }
    .switch-yes-no .switch-input:checked ~ .switch-label:before {
        transform: rotateY(180deg)
    }
    .switch-yes-no .switch-input:checked ~ .switch-label:after {
        transform: rotateY(0)
    }
    /* Switch Slide
    ==========================*/
    .switch-slide {
        padding: 0;
        background: #FFF;
        border-radius: 0;
        background-image: none;
    }
    .switch-slide .switch-label {
        box-shadow: none;
        background: none;
        overflow: hidden;
    }
    .switch-slide .switch-label:after, .switch-slide .switch-label:before {
        width: 100%;
        height: 65%;
        top: 5px;
        left: 0;
        text-align: center;
        padding-top: 10%;
        box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), inset 0 0 3px rgba(0, 0, 0, 0.1);
    }
    .switch-slide .switch-label:after {
        color: #FFFFFF;
        background: #87CEEB;
        left: -100px;
    }
    .switch-slide .switch-label:before {
        background: #eceeef;
    }
    .switch-slide .switch-handle {
        display: none;
    }
    .switch-slide .switch-input:checked ~ .switch-label {
        background: #FFF;
        border-color: #0088cc;
    }
    .switch-slide .switch-input:checked ~ .switch-label:before {
        left: 100px;
    }
    .switch-slide .switch-input:checked ~ .switch-label:after {
        left: 0;
    }
    /* Switch Light
    ==========================*/
    .switch-light {
        padding: 0;
        background: #FFF;
        background-image: none;
    }
    .switch-light .switch-label {
        background: #FFF;
        border: solid 2px #eceeef;
        box-shadow: none;
    }
    .switch-light .switch-label:after {
        color: #9370DB;
    }
    .switch-light .switch-label:before {
        right: inherit;
        left: 11px;
    }
    .switch-light .switch-handle {
        top: 6px;
        left: 72px;
        background: #dadada;
        width: 22px;
        height: 22px;
        box-shadow: none;
    }
    .switch-light .switch-handle:before {
        background: #eceeef;
    }
    .switch-light .switch-input:checked ~ .switch-label {
        background: #FFF;
        border-color: #9370DB;
    }
    .switch-light .switch-input:checked ~ .switch-handle {
        left: 72px;
        box-shadow: none;
        background: #9370DB
    }
    .switch-light .switch-input:checked ~ .switch-handle:before {
        background: rgba(255,255,255,0.7);
    }
    /* Transition
    ============================================================ */
    .switch-label, .switch-handle {
        transition: All 0.3s ease;
        -webkit-transition: All 0.3s ease;
        -moz-transition: All 0.3s ease;
        -o-transition: All 0.3s ease;
    }
    </style>
@endpush