@extends('layouts.customer')
@section('content')
<style type="text/css">
    .pac-container {
        top: 300px !important;
    }

    div.btn-group {
        width: 100%;
        border-radius: 0.1rem;
        border: 1px solid #d7d7d7;
    }

    .multiselect-selected-text {
        float: left;
    }

    b.caret {
        margin-left: 79%;
    }

    ul.multiselect-container.dropdown-menu.show {
        width: 100%;
    }

    .points-x-no, .points-x-yes { display: none; }
    .points-x-no.show, .points-x-yes.show { display: block; }
    .custom-switch {
        padding-left: 2.25rem !important;
    }
    .edit_model {
        position: absolute;
        top: 20px;
        right: 20px;
    }
</style>
<link rel="stylesheet" href="/css/bootstrap-multiselect.css">
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <h1>Activities</h1>
            <nav class="breadcrumb-container d-none d-sm-block d-lg-inline-block" aria-label="breadcrumb">
                <ol class="breadcrumb pt-0">
                    <li class="breadcrumb-item">
                        <a href="{{url('/')}}/dashboard">Dashboard</a>
                    </li>

                    <li class="breadcrumb-item" aria-current="page">Activities</li>
                    <li class="breadcrumb-item active" aria-current="page">List</li>
                </ol>
            </nav>
            <div class="separator mb-5"></div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
@if(session('success'))
    <div class="alert alert-success alert-dismissible fade show" role="alert">
        <strong>Success.</strong> {{ session('success') }}
    </div>
@endif

            <h5 class="mb-4">list</h5>
            <div class="row">
                @foreach($activities as $datas)
                <div class ="col-md-4">
                <div class="card my-2">
                    <div class="card-body">
                        <h5 class="card-title">@if(isset($datas->title)) {{$datas->title}} @else {{$datas->title}} @endif</h5>
                        <p class="card-text">@if(isset($datas->description)) {{$datas->description}} @else {{$datas->description}} @endif</p>
                        <div class="custom-control custom-switch">
                            <input type="checkbox" class="custom-control-input status-toggle" data-url="{{ secure_url('/createAndUp/activities/'.$datas->id) }}" id="toggleSwitch{{$datas->id}}" @if( isset( $datas->status ) && $datas->status == '1') {{ 'checked' }} @endif>
                            <label class="custom-control-label" for="toggleSwitch{{$datas->id}}">@if( isset( $datas->status ) && $datas->status == '1') {{ 'Active' }} @else {{ 'Inactive' }} @endif</label>
                        </div>
                        <a class = "edit_model" href="javascript:void(0)" data-toggle="modal" data-target="#myModal{{$datas->id}}">Edit</a>

                        <!-- model start -->
                        <div class="modal fade" id="myModal{{$datas->id}}">
                            <div class="modal-dialog modal-lg">
                                <div class="modal-content">

                                    <div class="modal-header">
                                        <h4 class="modal-title">Edit</h4>
                                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                                    </div>

                                    <div class="modal-body">
                                        <form action="{{ secure_url('/createAndUp/activities/'.$datas->id) }}" method="post">
                                            @csrf
                                            <div class="form-group">
                                                <label for="title">Title:</label>
                                                <input type="text" class="form-control" name="title" @if(isset($datas->title)) value="{{$datas->title}}" @else value="{{$datas->title}}" @endif>
                                            </div>

                                            <div class="form-group">
                                                <label for="description">Description:</label>
                                                <textarea class="form-control" name="description" rows="3">@if(isset($datas->description)) {{$datas->description}} @else {{$datas->description}} @endif</textarea>
                                                <input type="hidden" name="status" @if(isset($datas->status)) value="{{$datas->status}}" @else value="{{$datas->status}}" @endif>
                                            </div>

                                            @if($datas->id == 4)

                                              <div class="form-group">
                                                <label for="points">Inactive Order Months:</label>
                                                 <select name="inactive_orders_month" class="form-control">
                                                     <option value="0">Select</option>
                                                     @for($i = 1; $i < 13; $i++)
                                                        <option value="{{$i}}" @if($datas->inactive_orders_month == $i) selected @endif>{{$i}}</option>
                                                     @endfor
                                                 </select>
                                               </div>
                                               <div class="form-group">
                                                <label for="points">Last Order Day:</label>
                                                 <select name="last_order_day" class="form-control">
                                                     <option value="0">Select</option>
                                                     @for($i = 1; $i < 31; $i++)
                                                        <option value="{{$i}}" @if($datas->last_order_day == $i) selected @endif>{{$i}}</option>
                                                     @endfor
                                                 </select>
                                               </div>
                                                <div class="form-group">
                                                <label for="points">Apply on order:</label>
                                                 <select name="apply_on_order" class="form-control">
                                                       <option value="0">Select</option>
                                                        <option value="1" @if($datas->apply_on_order == 1) selected @endif>1st</option>
                                                        <option value="2" @if($datas->apply_on_order == 2) selected @endif>2nd</option>
                                                        <option value="3" @if($datas->apply_on_order == 3) selected @endif>3rd</option>
                                                 </select>
                                               </div>

                                            @endif

                                            <!-- <div class="form-group">
                                                <label for="points">Points:</label>
                                                <input type="number" class="form-control" name="points" @if(isset($datas->points)) value="{{$datas->points}}" @else value="{{$datas->points}}" @endif>
                                            </div> -->
                                    @php
                                        $isFirstOrderActivity =
                                            isset($datas->activity_id, $datas->title)
                                            && (int) $datas->activity_id === 2
                                            && stripos($datas->title, 'first order') !== false;
                                    @endphp

                                    <div class="tiers">
                                        <h4 class="header-title mb-4">Tiers</h4>

                                        @if($isFirstOrderActivity)
                                            {{-- SIMPLE SINGLE TIER INPUT --}}
                                            <div class="form-group">
                                                <label>Tier 1 Points</label>
                                                <input
                                                    type="number"
                                                    class="form-control"
                                                    name="tiers[1][points]"
                                                    value="{{ $datas->points ?? '' }}"
                                                    placeholder="Enter points for first order"
                                                >
                                                <input type="hidden" name="tiers[1][id]" value="1">
                                            </div>

                                        @else
                                            {{-- EXISTING MULTI-TIER UI --}}
                                            @php
                                                $activeFirst = true;
                                                $list = $content = '';
                                            @endphp

                                            @forelse ( $datas->tiers as $tier )
                                                @php
                                                    $list .= '
                                                        <li class="nav-item">
                                                            <a href="#a-'. $datas->id .'-t-'. $tier->id .'" data-toggle="tab"
                                                               class="nav-link '. ( $activeFirst ? 'active' : '' ) .'">
                                                                '. $tier->title .'
                                                            </a>
                                                        </li>
                                                    ';

                                                    $checkboxOrNot = '';

                                                    if( $datas->point_type == 1 ) {
                                                        $checkboxOrNot = '
                                                            <div class="custom-control custom-switch">
                                                                <input type="checkbox"
                                                                       name="tiers['. $tier->id .'][point_type]"
                                                                       class="custom-control-input point-x-switch"
                                                                       id="toggleSwitch'. $datas->id .'-'. $tier->id .'"
                                                                       '. ( ( isset( $tier->pivot->point_type ) && $tier->pivot->point_type == "1") ? "checked" : "" ) .'>
                                                                <label class="custom-control-label"
                                                                       for="toggleSwitch'. $datas->id .'-'. $tier->id .'">
                                                                    Points to X times?
                                                                </label>
                                                            </div>
                                                        ';
                                                    }

                                                    $applied_on = $tier?->pivot->points_applied_on ?? '';

                                                    $content .= '
                                                        <div class="tab-pane '. ( $activeFirst ? 'show active' : 'fade' ) .'"
                                                             id="a-'. $datas->id .'-t-'. $tier->id .'">
                                                            '. $checkboxOrNot .'
                                                            <div class="form-group">
                                                                <label>Points</label>
                                                                <input type="number"
                                                                       class="form-control"
                                                                       name="tiers['. $tier->id .'][points]"
                                                                       value="'. ( $tier->pivot->points ?? '' ) .'">
                                                                <input type="hidden"
                                                                       name="tiers['. $tier->id .'][id]"
                                                                       value="'. $tier->id .'">
                                                            </div>
                                                            <p>'. $tier->description .'</p>
                                                        </div>
                                                    ';

                                                    $activeFirst = false;
                                                @endphp
                                            @empty
                                            @endforelse

                                            <div class="survey-app">
                                                <div class="row">
                                                    <div class="col-3">
                                                        <ul class="nav nav-pills flex-column separator-tabs ml-0 mb-5">
                                                            {!! $list !!}
                                                        </ul>
                                                    </div>
                                                    <div class="col-9">
                                                        <div class="tab-content mb-4">
                                                            {!! $content !!}
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endif
                                    </div>


                                    </div>

                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                        <button type="submit" class="btn btn-primary">Save</button>
                                    </div>
                                    </form>

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


                        <!-- end model start -->

                    </div>
                </div> 
                </div>
                @endforeach
            </div>
        </div>
    </div>
</div>

        
@endsection
@section('script')
    <script>
        $(document).ready(function() {
            $(document).on('change', '.status-toggle', function() {
                var status = this.checked?1:0;
                var ajax_url = $(this).data('url');
                $(this).parent().children('label').text( status ? 'Active' : 'Inactive' );
                var csrf_token = $('meta[name="csrf-token"]').attr('content');
                $.ajax({
                    type: "POST",
                    url: ajax_url,
                    data: {is_ajax: true, status: status, _token: csrf_token},
                    success: function(response) {
                        location.reload();
                        // console.log(response);
                    },
                    error: function(error) {
                        console.log(error);
                    }
                });
            });

            $(document).on('change', '.point-x-switch', function() {
                let _target = $(this).parent().parent();
                if( ! this.checked ) {
                    _target.find('label.points-x-no').addClass('show');
                    _target.find('label.points-x-yes').removeClass('show');
                } else {
                    _target.find('label.points-x-yes').addClass('show');
                    _target.find('label.points-x-no').removeClass('show');
                }
            });
        });
    </script>
@endsection