@extends('layouts.layout')

@section('title', 'Alerts')
<!-- @section('content') -->
@section('content')
<style type="text/css">
    .table-custom-wrap-alert thead{
        background-color: #121214;
        color: #fff;
    }
</style>
<div class="content-inner">
    <div class="dashboard-inner">
        <div class="dashboard-header">
            <h3>Alerts</h3>
            <a href="{{url('/alerts/create-alert')}}" class="btn">Create New Alert</a>
        </div>
        <form>
                <div class="user-select-group select-auto account-select-auto mb-4 alertSelectGroup">       @if($user_role_id == 1)
                    <select  class="form-select mb-0" name="franchise">
                            <option value="">Franchise</option>
                            @foreach($franchises as $franchise)
                                <option value="{{ $franchise->id }}" {{(($searchfranchise == $franchise->id) ? "selected" : "")}}>{{ $franchise->name }}</option>
                            @endforeach
                    </select>
                @endif

                <div class="form-wrap datepicker date input-group style-input mb-0">
                     @if(empty($searchfromdate))
                    <label for="fromdate" class="style-label">From Date*</label>
                    @endif
                    <input type="text" id="fromdate" name="fromdate" class="form-control datepicker-custom" value="{{$searchfromdate}}">
                    <div class="input-group-append">
                    <i class="fas fa-calendar-alt"></i>
                    </div>
                </div>



                <div class="form-wrap datepicker date input-group style-input mb-0">
                    @if(empty($searchtodate))
                    <label for="todate" class="style-label">To Date*</label>
                    @endif
                    <input type="text" id="todate" name="todate" class="form-control datepicker-custom"  value="{{$searchtodate}}">
                    <div class="input-group-append">
                    <i class="fas fa-calendar-alt"></i>
                    </div>
                </div>


                <select  class="form-select mb-0" name="alert">
                        <option value="">Alert Type</option>

                            <option value="Email" {{(($searchalert == "Email") ? "selected" : "")}}>Email</option>
                            <option value="Website" {{(($searchalert == "Website") ? "selected" : "")}}>Website</option>
                            <option value="SMS" {{(($searchalert == "SMS") ? "selected" : "")}}>SMS</option>
                            <option value="Account" {{(($searchalert == "Account") ? "selected" : "")}}>Account</option>
                </select>


                    <button type="submit" class="btn m-0">Filter</button>
                    @if (!empty($searchfranchise) || !empty($searchalert) || !empty($searchfromdate) || !empty($searchtodate))
                    <a href="{{ url('alerts') }}" class="btn m-0">Clear</a>
                    @endif
            </div>
        </form>
        <div class="table-custom-wrap-alert last-th-none">
            <table id="example1" class="table table-bordered table-striped">
                <thead>
                    <tr>
                        <!-- <th>Display Order</th> -->
                        <th>Alert Name</th>
                        <th>Alert Type</th>
                        <th>Created By</th>
                        @if($user_role_id == 1)
                            <th>Franchise</th>
                        @endif
                        <th>Sent Date & Time</th>
                        <th>Email</th>
                        <th>Website</th>
                        <th>SMS</th>
                        <th>Account</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                @if($alerts)
                    @foreach($alerts as $alert)
                    <tr class="text-capitalize ui-sortable-handle row1" data-id="">
                        <!-- <td class="cursor-drag"><span class="drag_me" data-rowid=""><i class="fas fa-grip-vertical"></i></span></td> -->
                        <td>{{$alert['name']}}</td>
                        <td>{{$alert['type']}}</td>
                        <td>@if(!empty($alert['user'])){{$alert['user']['firstname']}} {{$alert['user']['lastname']}} @endif</td>
                        @if($user_role_id == 1)
                        <td>@if(!empty($alert['franchise'])){{ $alert['franchise']['name'] }}@endif</td>
                        @endif
                        <td>@if($alert['email_type'] == 1 || $alert['sms_type'] == 1){{ date('d/m/y',strtotime($alert['created_at'])) }} | {{date("H:i",strtotime($alert['created_at']))}} @elseif($alert['website_type'] == 1 && !empty($alert['website_alert_startdate']))  {{ date('d/m/y',strtotime($alert['website_alert_startdate'])) }} | {{date("H:i",strtotime($alert['website_alert_starttime']))}} @elseif($alert['user_account_type'] == 1 && !empty($alert['user_account_alert_startdate']))  {{ date('d/m/y',strtotime($alert['user_account_alert_startdate'])) }} | {{date("H:i",strtotime($alert['user_account_alert_starttime']))}} @endif</td>
                        <td>@if($alert['email_type'] != 1) No @else Yes @endif</td>
                        <td>@if($alert['website_type'] != 1) No @else Yes @endif</td>
                        <td>@if($alert['sms_type'] != 1) No @else Yes @endif</td>
                        <td>@if($alert['user_account_type'] != 1) No @else Yes @endif</td>
                        <td>
                            <!-- <a href="{{ url('/alerts/'.$alert['id'].'/edit-alert/')}}" class="mr-3">Edit</a>
                            <a href="{{ url('/alerts/'.$alert['id'].'/view-alert/')}}"><img src="{{ asset('images/table-toggle.svg') }}" alt=""></a> -->
                            @if($alert['website_type'] == 1 || $alert['user_account_type'] == 1)
                                @if($alert['website_type'] == 1 && $alert['website_alert_enddate'] >= returnCurrentDate('Y-m-d') && $alert['website_alert_endtime'] > returnCurrentDate('H:i'))
                                    <a href="{{ url('/alerts/'.$alert['id'].'/edit-alert/')}}">
                                @elseif($alert['user_account_type'] == 1 && $alert['user_account_alert_enddate'] >= returnCurrentDate('Y-m-d') && $alert['user_account_alert_endtime'] > returnCurrentDate('H:i'))
                                    <a href="{{ url('/alerts/'.$alert['id'].'/edit-alert/')}}">
                                @else
                                    <a href="{{ url('/alerts/'.$alert['id'].'/view-alert/')}}">
                                @endif
                            @else
                                <a href="{{ url('/alerts/'.$alert['id'].'/view-alert/')}}">
                            @endif
                                <img src="{{ asset('images/table-toggle.svg') }}" alt="">
                            </a>
                        </td>
                    </tr>
                    @endforeach
                @endif

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>

  // $("tbody").sortable({
  //   cursor: 'row-resize',

  //   placeholder: 'ui-state-highlight',
  //   opacity: '0.55',
  //   items: '.ui-sortable-handle,.ui-sortable-handle-sub',
  //   update: function() {

  //         sendOrderToServer();

  //         //$("#sortable").sortable();
  //     }

  //   }).disableSelection();

    function sendOrderToServer() {

        var order = [];
        $('tr.row1').each(function(index,element) {
            order.push({
              id: $(this).attr('data-id'),
              position: index+1
            });

          });
        $.ajax({
        type: "POST",
        dataType: "json",
        url: "{{ url('alerts/sortabledatatable') }}",
        data: {
            order:order,
            _token: '{{csrf_token()}}'
        },
        success: function(response) {
            if (response.status == "success") {
                console.log(response);
            } else {
                console.log(response);
            }
        }
        });
    }

    function select_franchise(value,alert,fromdate,todate){
        location.href = "alerts?franchise="+value+((alert != "") ? "&alert="+alert : '')+((fromdate != "") ? "&fromdate="+fromdate : '')+((todate != "") ? "&todate="+todate : '');
    }

    function select_fromdate(value,franchise,alert,todate){
         location.href = "alerts?fromdate="+value+((alert != "") ? "&alert="+alert : '')+((franchise != "") ? "&franchise="+franchise : '')+((todate != "") ? "&todate="+todate : '');
    }


    function select_todate(value,franchise,alert,fromdate){
         location.href = "alerts?todate="+value+((alert != "") ? "&alert="+alert : '')+((franchise != "") ? "&franchise="+franchise : '')+((fromdate != "") ? "&fromdate="+fromdate : '');
    }
    function select_alert(value,franchise,fromdate,todate){
        location.href = "alerts?alert="+value+((franchise != "") ? "&franchise="+franchise : '')+((fromdate != "") ? "&fromdate="+fromdate : '')+((todate != "") ? "&todate="+todate : '');
    }

    function clear_filter(){
        location.href = "{{url('alerts')}}";
    }
</script>
@endsection