@extends('layouts.dashboard')
@section('content')
    <div class="page-heading">
        <div class="page-title">
            <div class="row">
                <div class="col-12 col-md-6 order-md-1 order-last">
                    <h3>Menu Send Birthday</h3>
                    <p class="text-subtitle text-muted"></p>
                </div>
                <div class="col-12 col-md-6 order-md-2 order-first">
                    <nav aria-label="breadcrumb" class="breadcrumb-header float-start float-lg-end">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">Admin</li>
                            <li class="breadcrumb-item active" aria-current="page">Send Birthday</li>
                        </ol>
                    </nav>
                </div>
            </div>
        </div>
        <section id="basic-horizontal-layouts">
            <div class="row match-height">
                <div class="col-md-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Master Birthday</h4>
                            @if ($masters == null)
                                <div class="button">
                                    @can('birthday-set-master')
                                    <a href="{{ route('birthday.setMaster') }}" class="btn btn-primary">Set Master
                                        Birthday</a>
                                    @endcan

                                </div>
                            @else
                                <div></div>
                            @endif

                        </div>

                        <div class="card-content">
                            <div class="card-body">
                                <form class="form form-horizontal">
                                    <div class="form-body">
                                        @if ($masters == null)
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label for="first-name-horizontal">Devices</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="first-name-horizontal" class="form-control"
                                                        name="fname" value="Data Kosong" readonly>
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="email-horizontal">Gambar</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <div
                                                        class="d-flex justify-content-center align-items-center flex-column">
                                                        <div>
                                                            <img src="">
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="contact-info-horizontal">Template Pesan</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <textarea name="text" id="messageInput" class="form-control" cols="30" rows="10" readonly>Data Kosong</textarea>
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="password-horizontal">Auto Send</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <span class="badge bg-danger">Data Kosong</span>
                                                </div>
                                            </div>
                                        @else
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label for="first-name-horizontal">Devices</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <input type="text" id="first-name-horizontal" class="form-control"
                                                        name="fname" value="  {{ $masters->Device->name }}" readonly>
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="email-horizontal">Gambar</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <div
                                                        class="d-flex justify-content-center align-items-center flex-column">
                                                        <div>
                                                            <img src="{{ url('/images/' . $masters->url) }}" width="300" height="200">
                                                        </div>

                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="contact-info-horizontal">Template Pesan</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    <textarea name="text" id="messageInput" class="form-control" cols="30" rows="10" readonly>{{ $masters->text }}</textarea>
                                                </div>
                                                <div class="col-md-4">
                                                    <label for="password-horizontal">Auto Send</label>
                                                </div>
                                                <div class="col-md-8 form-group">
                                                    @if ($masters->auto_send == 'on')
                                                        <span class="badge bg-primary">ON</span>
                                                    @else
                                                        <span class="badge bg-danger">OFF</span>
                                                    @endif
                                                </div>
                                            </div>
                                            <div class="button" style="float: right">
                                                @can('birthday-edit-master')
                                                <a href="{{ route('birthday.editMaster', $masters->id) }}"
                                                    class="btn btn-info">Edit</a>
                                                @endcan
                                              @can('birthday-delete-master')
                                              <a href="{{ route('birthday.deleteMaster', $masters->id) }}"
                                                class="btn btn-danger">delete</a>
                                              @endcan
                                            </div>
                                        @endif
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 col-12">
                    <div class="card">
                        <div class="card-header">
                            <h4 class="card-title">Master Reminder</h4>
                            @if ($reminder == null)
                            @can('birthday-set-reminder')
                            <div class="button">
                                <a href="{{ route('birthday.setReminder') }}" class="btn btn-success">Set Master
                                    Reminder</a>
                            </div>
                            @endcan
                            @else
                            @endif

                        </div>
                        <div class="card-content">
                            <div class="card-body">
                                <form class="form form-horizontal">
                                    <div class="form-body">
                                        @if ($reminder == null)
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label for="first-name-horizontal-icon">No Handphone</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <div class="form-group has-icon-left">
                                                        <div class="position-relative">
                                                            <input type="text" class="form-control"
                                                                value="Data Kosong" readonly>
                                                            <div class="form-control-icon">
                                                                <i class="bi bi-phone"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Devices</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <input type="text" value="" readonly class="form-control">
                                                </div>
                                            </div>
                                        @else
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <label for="first-name-horizontal-icon">No Handphone</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <div class="form-group has-icon-left">
                                                        <div class="position-relative">
                                                            <input type="text" class="form-control"
                                                                value="{{ $reminder->number }}" readonly>
                                                            <div class="form-control-icon">
                                                                <i class="bi bi-phone"></i>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <label>Devices</label>
                                                </div>
                                                <div class="col-md-8">
                                                    <input type="text" value="{{ $reminder->Device->name }}" readonly
                                                        class="form-control">
                                                </div>
                                            </div>

                                            <div class="button" style="float: right; margin-top:10px">
                                                @can('birthday-edit-reminder')
                                                <a href="{{ route('birthday.editReminder', $reminder->id) }}"
                                                    class="btn btn-info">Edit</a>
                                                @endcan
                                               @can('birthday-delete-reminder')
                                               <a href="{{ route('birthday.deleteReminder', $reminder->id) }}"
                                                class="btn btn-danger">Delete</a>
                                               @endcan

                                            </div>
                                        @endif
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-tittle">Data Send Birthday</h4>
                    <div class="button">
                        @can('birthday-send')
                        <a href="{{ route('birthday.create') }}" class="btn btn-primary">Send Messages Birthday</a>
                        @endcan
                    </div>

                    <div class="card-body">
                        <table class="table table-striped" id="table1">
                            <thead>
                                <tr>
                                    <th>no</th>
                                    <th>Devices</th>
                                    <th>No Handphone</th>
                                    <th>Url</th>
                                    <th>Pesan</th>
                                    <th>Auto Send</th>
                                    <th>Action</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($birthday as $index => $birthday)
                                <tr>
                                    <td>{{ $index + 1 }}</td>
                                    <td>{{ $birthday->Device->name }}</td>
                                    <td>{{ $birthday->number }}</td>
                                    <td>{{ $birthday->url }}</td>
                                    <td>{{$birthday->text  }}</td>
                                    <td>{{ $birthday->auto_send }}</td>
                                 <td>
                                        @can('birthday-delete')
                                            <form action="{{ route('birthday.destroy', $birthday->id) }}" method="POST"
                                                class="">

                                                @csrf
                                                @method('DELETE')

                                                <button class="btn">
                                                    <i class=" bi bi-trash-fill"></i>
                                                </button>
                                            </form>
                                        @endcan
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>

                        </table>
                    </div>
                </div>

        </section>
    </div>
@endsection
@push('script')
    <script>
        // Simple Datatable
        let table1 = document.querySelector('#table1');
        let dataTable = new simpleDatatables.DataTable(table1);
    </script>
@endpush