{{-- Extends layout --}}
@extends('layout.default')

{{-- Content --}}
@section('content')
    <div class="card card-custom">
        <div class="card-header flex-wrap border-0 pt-6 pb-0">
            <div class="card-title">
                <h3 class="card-label">Your Campaign Draft
                    <div class="text-muted pt-2 font-size-sm">Your Current Campaign.</div>
                </h3>
            </div>

            <div class="card-toolbar">
                <a href="{{ url('letters') }}" class="btn btn-light-primary font-weight-bolder mr-2 mb-2">
                    Letter Management
                </a>
                <div>
                    <form method="post" class="form" novalidate="novalidate" id="kt_remove_campaign_form" name="kt_remove_campaign_form" Action="{{route('removeCampaign')}}">
                        {{ method_field('DELETE') }}
                        {{csrf_field()}}
                        <button type="submit" class="btn btn-success mr-2 mb-2">
                            </span>Empty Campaign
                        </button>
                    </form>
                </div>
                <a id="print" class="btn btn-light-danger font-weight-bolder mr-2 mb-2">Print Locally</a>
                <a id="contact" class="btn btn-light-success font-weight-bolder mb-2">Send Bulk Mail</a>
            </div>

               {{-- <select name="select_trigger" id="select_trigger" class="form-control selectpicker col-md-2"  data-style="btn-info">
                    <option disable value="">Select Trigger</option>
                    @foreach($triggers as $key => $item)
                    <option value="{{$key}}">{{$item }}</option>
                    @endforeach
                </select> --}}

                {{-- <select name="print" id="print" class="form-control selectpicker col-md-2"  data-style="btn-danger">
                    <option disable value="">Print & Save</option>
                    <!-- <option value="1">Print Letterhead Only</option> -->
                    <option value="2">Print Content Only</option>
                    <option value="3">Print Letterhead & Content</option>
                </select> --}}
                {{-- <a id="contact" class="btn btn-light-success font-weight-bolder mr-2">Contact {{config('propai.appName')}}</a> --}}
                {{--                <a id="calculatePrice" class="btn btn-light-primary font-weight-bolder mr-2">Calculate Price</a>--}}
            {{-- </div> --}}
            <!--end::Dropdown-->

        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-bordered table-hover" style="width:100%">
                    <thead>
                        <tr>
                            <th>
                                <label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary">
                                    <input type="checkbox" id="select_all" name="select_all">
                                    <span></span>
                                </label>
                            </th>
                            <th>Sl.</th>
                            <th width="20%">Address</th>
                            <th>Agency</th>
                            <th class="mw-140">
                                <select name="trigering_id" id="trigering_id" class="form-control select-trigger ">
                                    <option value="">Select Trigger</option>
                                    @foreach ($triggers as $key => $trigger)
                                        @if (in_array($key, $exists))
                                            <option  value="{{$key}}"> {{$trigger}} </option>
                                        @endif
                                    @endforeach
                                </select>
                            </th>
                            <th class="mw-100">Listed Date</th>
                            {{-- <th>Last Letter Sent</th>
                            <th>Last Date Sent</th>
                            <th>Remove</th> --}}
                        </tr>
                    </thead>

                    <tbody>
                    @if(count($lists)>0)
                        @foreach($lists as $item)
                            @php
                            $encrpt_id = Helper::encryptData($item->h_id);
                            $url = route('propertyDetails', ['property_id' => $encrpt_id]);
                            @endphp
                        <tr>
                            <td>
                                <label class="checkbox checkbox-outline checkbox-outline-2x checkbox-primary">
                                    <input class="propertyCheck" type="checkbox" value="{{ $item->id }}"
                                           name="property[]" data-property-title="{!! nl2br($item->address) !!}">
                                    <span></span>
                                </label>
                            </td>
                            <td>{{ $item->sl }}</td>
                            <td><a href="{{$url}}">{!! nl2br($item->address) !!}</a></td>
                            <td>{{ $item->agency }}</td>
                            <td>
                                <select name="trigger[{{ $item->id }}]" class="form-control select-trigger">
                                    <option value="">Select Trigger</option>
                                    @foreach ($triggers as $key => $trigger)
                                        @if (in_array($key, $exists))
                                            <option value="{{$key}}"> {{$trigger}} </option>
                                        @endif
                                    @endforeach
                                </select>
                                <span class="error" style="color: #ff0000;"></span>
                            </td>
                            <td>{{ $item->listed_date }}</td>
                            {{-- <td>{{ $item->last_letter_sent }}</td>
                            <td>{{ $item->last_date_sent }}</td>
                            <td></td> --}}
                        </tr>
                        @endforeach
                    @else
                        <tr>
                            <td colspan="8">No Campaigns Added</td>
                        </tr>
                    @endif
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <!-- Modal for Bulk Mailing -->
    <div class="modal fade" id="contactModal" tabindex="-1" role="dialog" aria-labelledby="contactModal"
         aria-hidden="true">
        <div class="modal-dialog modal-md bulk-mailling-billing-modal" role="document">
            <form method="post" novalidate="novalidate" action="{{ url('campaigns/contact') }}" class="form" id="generateCampaigns" name="generateCampaigns">
                {{csrf_field()}}
                <div class="modal-content">
                    <h2 class="add-un">  Bulk Mail Confirmation </h2>
                    <div class="modal-body modal-summary">
                        <h4 class="add-un">  Bulk Mail Summary </h4>
                    </div>
                    <!-- Modal data provided dynamically using JS -->
                    <div class="modal-body modal-table modal-list">
                        <h4 class="add-un">  Bulk Mail List </h4>
                        <div class="accordion accordion-toggle-arrow" id="accordionExample1">
                            <div class="card">
                                <div class="card-header">
                                    <div class="card-title add-un collapsed" data-toggle="collapse" data-target="#collapseOne1" aria-expanded="false">Click to see full selected post list</div>
                                </div>
                                <div id="collapseOne1" class="collapse" data-parent="#accordionExample1" style="">
                                    <div class="card-body modal-table-accordian"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer add-un">
                        <div id="properties"></div>
                        <button type="button" class="btn btn-light-danger" data-dismiss="modal">Cancel</button>
                        <a href="https://www.google.com" target="_blank"><button type="button" class="btn btn-success" id="bulk-print-preview">Print Preview</button></a>
                        <button type="submit" class="btn btn-light-primary" id="confirmCampaignX" >Confirm & Send</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="modal fade" id="filterModal" tabindex="-1" role="dialog" aria-labelledby="filterModal"
         aria-hidden="true">
        <div class="modal-dialog modal-md" role="document">
            <form method="post" novalidate="novalidate" action="{{ url('generate-campaign') }}" class="form" id="generateCampaignsX" name="generateCampaignsX">
                {{csrf_field()}}
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalCenterTitle">Calculated Price</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group row" style="border-bottom: 1px solid #cccccc; padding-bottom: 5px;">
                            <div class="col-sm-4">
                                Title
                            </div>
                            <div class="col-sm-2">
                                Quantity
                            </div>
                            <div class="col-sm-3">
                                Unit Price
                            </div>
                            <div class="col-sm-3">
                                Total Price
                            </div>
                        </div>
                        <div class="form-group row" style="border-bottom: 1px solid #cccccc; padding-bottom: 5px;">
                            <div class="col-sm-4">
                                Campaigns
                            </div>
                            <div class="col-sm-2" id="qty">

                            </div>
                            <div class="col-sm-3" id="Price">

                            </div>
                            <div class="col-sm-3" id="amount">

                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-4">
                            </div>
                            <div class="col-sm-5 text-right">
                                VAT (20%) :
                            </div>
                            <div class="col-sm-3" id="vat">

                            </div>
                        </div>
                        <div class="form-group row">
                            <div class="col-sm-4">
                            </div>
                            <div class="col-sm-5 text-right">
                                Total :
                            </div>
                            <div class="col-sm-3" id="total">

                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div id="properties"></div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" id="confirmCampaignX" class="btn btn-primary">Confirm</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <!-- Modal for Printing Locally -->
    <div class="modal fade" id="editAddressModal" tabindex="-1" role="dialog" aria-labelledby="filterModal"
         aria-hidden="true">
        <div class="modal-dialog modal-md modal-dialog-scrollable" role="document">
            <form method="post" novalidate="novalidate" action="" class="form" id="eamForm" name="eamForm">
                {{csrf_field()}}
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="eamTitle">Edit Address</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="eamLoader">
                            <div class="spinner_x">
                                <div class="bounce1"></div>
                                <div class="bounce2"></div>
                                <div class="bounce3"></div>
                            </div>
                        </div>
                        <div class="edit_area_wrap" id="editAreaWrap"></div>
                    </div>
                    <div class="modal-footer">
                        <div id="properties"></div>
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-danger editPrint" data-print="2">Print Content Only</button>
                        <button type="submit" class="btn btn-info editPrint" data-print="3">Print Letterhead & Content</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
@endsection

@section('styles')
<link href="{{ asset('plugins/custom/datatables/datatables.bundle.css') }}" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="{{asset('css/pages/style.css')}}">
<style>
.spinner_x {
  margin: 20px auto;
  width: 70px;
  text-align: center;
}

.spinner_x > div {
  width: 12px;
  height: 12px;
  background-color: #bababa;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner_x .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner_x .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}

.bulk-mailling-billing-modal {
    max-width: 65%;
    margin-top: 5%;
}

.bulk-mailling-billing-modal h2{
    padding: 3% 2%;
    font-size: 22px !important;
    margin: 0px;
    border: 0.1px solid;
}

.bulk-mailling-billing-modal .modal-body {
    border: 0.1px solid;
    font-size: 12px;
}

.bulk-mailling-billing-modal .modal-footer {
    border: 0.1px solid;
}

.bulk-mailling-billing-modal .checkbox.checkbox-outline.checkbox-primary > span {
    margin-right: 10px;
}

.bulk-mailling-billing-modal h4{
    padding: 2% 3%;
    font-size: 14px !important;
    margin: -25px -24px 15px -24px;
    border: 0.1px solid;
}

.bulk-mailling-billing-modal .form-group {
    margin-bottom: 0.75rem;
}

.bulk-mailling-billing-modal .accordion.accordion-toggle-arrow .card .card-header .card-title.collapsed:after,
.bulk-mailling-billing-modal .accordion.accordion-toggle-arrow .card .card-header .card-title:after {
    color: white;
}

.bulk-mailling-billing-modal .accordion .card:last-child {
    border: none;
}

</style>
@endsection

{{-- Scripts Section --}}
@section('scripts')
    <script>
        var link = '{{ url('/') }}';
        var token = '{{ csrf_token() }}';
    </script>
    <script src="{{ asset('js/app.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/developer/campaign.js') }}" type="text/javascript"></script>
    <script type="text/javascript" src="{{ asset('js/developer/ajax-crud.js') }}"></script>
    <script src="{{ asset('plugins/custom/datatables/datatables.bundle.js') }}" type="text/javascript"></script>

    <script>
        $(document).on("click", ".filter-option-inner-inner", function(e) {
            $(".dropdown-menu li:first").css('display','none');
        });

        $(document).ready(function() {
            $("table").DataTable({
                bFilter:false,
                searching:false,
                pagination: true,
                pageLength:500,
                responsive: !0,
                info : false,
                bLengthChange:false,
                order:false,
                //  "order": [[ 1, "desc" ]]
            });
        });
    </script>
@endsection