@extends('layouts.app')

@section('content')

<div class="card-header"><span><a href="{{ route('dashboard') }}">{{ __('Dashboard') }}</a></span> >
    <span>{{ __('Raffle Draw') }}</span></div>
<div class="card-body dashboard-card">
    <div class="row">
        <div class="col-md-8 col-12" style="border-right: 2px solid">
            <div class="row">
                {{-- <div class="col-md-4">
                    <a class="btn" href="{{ route('raffle_draw') }}" target="_blank">Raffle Draw</a>
                </div> --}}
                <div class="col-md-2"><button type="button" class="btn" id="settingsBtn" onclick="viewSettings()">Settings</button></div>
                <div class="col-md-4"></div>

                {{-- <div class="col-md-2">
                    <form id="form" action="{{ route('winnerslist.export') }}" method="get">
                @csrf
                {{-- <input type="hidden" name="from_date" id="export_from_date" class="form-control"
                            value="{{ $from_date??'' }}" />
                <input type="hidden" name="to_date" id="export_to_date" class="form-control"
                    value="{{ $to_date??'' }}" /> --}
                <button type="submit" class="btn" id="export_btn">Export</button>
                </form>
            </div> --}}
        </div>

        <!------- Draw table----->
        <div class="row mt-4">
            <h5 class="ml-4"> Draw List</h5>
            <div class="col-12 table-responsive">
                <table class="table table-bordered datatable">
                    <thead>
                        <tr>
                            <th class="text-center" width="3%">Sl.No</th>
                            <th width="25%">Category</th>
                            <th width="30%">Prize</th>
                            <th width="20%">Total Count</th>
                            <th width="20%">Pending</th>
                            <th width="2%">Draw</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach ($prizes as $prize)
                            <tr>
                                <td>{{ $loop->index + 1 }}</td>
                                <td>{{ $prize->category->name }}</td>
                                <td>{{ $prize->prize }}</td>
                                <td>{{ $prize->total_count }}</td>
                                <td>{{ $prize->pending }}</td>
                                <td>
                                    @if ($prize->pending >0)
                                    <a class="btn" href="{{ route('raffle_draw',$prize->url_slug) }}" target="_blank">Raffle Draw</a>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
            <button type="button" onclick="resetData()"
                style="color:#f8f9fa;background-color:#f8f9fa!important;border:1px #f8f9fa"> Reset</button>
            {{-- <button type="button" onclick="resetData()" class="btn" style="width:60px;"> Reset</button> --}}
        </div>
    </div>
    <div class="col-md-4 col-12">
        <!------- Week table----->
        <div class="row">
            <div class="col-12">
                <div class="row">
                    <div class="col-8">
                        <h5> Week List</h5>
                    </div>
                    <div class="col-4">
                        <button type="button" class="btn" id="addPrizeWeekBtn">Add</button>
                    </div>
                </div>

            </div>
            <div class="col-12 table-responsive mt-4 scroll-n-height">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th class="text-center" width="5%">Sl.No</th>
                            <th width="50%">Week</th>
                            <th width="55%">Date</th>
                            {{-- <th width="10%" class="text-center">Status</th> --}}
                            <th width="5%">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach($weeks as $week)
                        <tr>
                            <td>{{ $loop->index+1 }}</td>
                            <td>{{ $week->prize_week }}</td>
                            <td>{{ $week->prize_date }}</td>
                            {{-- <td class="text-center">
                                @if($week->status==0)
                                <i class="fa fa-check" aria-hidden="true"></i>
                                @else
                                <i class="fa fa-hourglass-start" aria-hidden="true"></i>
                                @endif
                            </td> --}}
                            <td>
                                <p>
                                <span id="view_week"
                                    onclick="viewPrizeWeekDetails({{ $week->id }})">
                                    <i class="fa fa-eye" aria-hidden="true"></i>
                                </span>
                                @if($week->active_status==0)
                                <span id="view_week"
                                    onclick="deletePrizeWeekDetails({{ $week->id }})" style="color: rgb(182, 8, 8);">
                                    <i class="fa fa-trash" aria-hidden="true"></i>
                                </span>
                                @endif
                                </p>
                            </td>
                        </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </div>

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

<!---- Prize Week View modal --->
<div class="modal" id="viewPrizeWeekModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Week Details</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form action="#" id="weekForm" class="form-horizontal" method="post">
                    @csrf
                    <input type="hidden" name="week_id" id="week_id" value="">
                    <div class="row form-group">
                        <div class="col-md-4 col-12">
                            <label>Week</label>
                        </div>
                        <div class="col-md-8 col-12">
                            <input type="text" name="prize_week" id="prize_week" class="form-control"
                                value="" required />
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-4 col-12 ">
                            <label>Prize Draw Date</label>
                        </div>
                        <div class="col-md-8 col-12">
                            <input type="date" name="prize_date" id="prize_date" class="form-control"
                                value="" required />
                        </div>
                    </div>
                   
                </form>
                <div class="alert alert-danger mt-2 error_save_prize" style="display: none;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="savePrizeWeekBtn">Save</button>

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



<!---- Settings modal --->
<div class="modal" id="viewSettingsModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Settings</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button>
            </div>

            <div class="modal-body">
                <form action="#" id="settingsForm" class="form-horizontal" method="post">
                    @csrf
                    <input type="hidden" name="settings_id" id="settings_id" value="">
                    <div class="row form-group">
                        <div class="col-md-3 col-12">
                            <label>Week</label>
                        </div>
                        <div class="col-md-9 col-12">
                            <select name="prize_week_id" id="prize_week_id" class="form-control" required >
                                <option>Select</option>
                                @foreach ($weeks as $week)
                                <option value="{{ $week->id }}">{{ $week->prize_week }}</option>
                                @endforeach
                            </select>
                            <span>*Changing week will delete all form & verified data. Cannot restore</span>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-3 col-12">
                            <label>Spin time</label>
                        </div>
                        <div class="col-md-9 col-12">
                            <input type="number" name="spin_time" id="spin_time" class="form-control" value="40" max="100" required/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <div class="col-md-3 col-12">
                            <label>Speed</label>
                        </div>
                        <div class="col-md-9 col-12">
                            <!--<input type="number" name="speed" id="speed" class="form-control" value="5" max="10" required/>-->
                            <div class="input-group">
                               <input type="number" name="speed" id="speed" class="form-control" value="5" max="10" required/>
                               <div class="input-group-append">
                                   <span class="input-group-text"> s </span>
                               </div>
                            </div>
                            <span>Faster when value is less</span>
                        </div>
                    </div>

                </form>
                <div class="alert alert-danger mt-2 error_save_settings" style="display: none;"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="saveSettingsBtn">Save</button>

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

@endsection

@section('scripts')
<script type="text/javascript">
    var s_message = "{{session('success')}}";
    var e_message = "{{session('error')}}";

    $(function () {

        var from_date = $('#from_date').val();
        var to_date = $('#to_date').val();

        if (s_message)
            Swal.fire({
                text: s_message,
                type: 'success',
                confirmButtonText: 'Ok',
                confirmButtonColor: "rgb(174,46,184)"

            });
        if (e_message)
            Swal.fire({
                text: e_message,
                type: 'error',
                confirmButtonText: 'Ok',
                confirmButtonColor: "rgb(174,46,184)"

            });

            var table = $('.datatable').DataTable();
    });

    // -------------------------Prize---------------------------------
    $("#addPrizeWeekBtn").on("click", function () {
        $('#weekForm').trigger("reset");
        $(".error_save_prize").hide();
        $("#week_id").val("");
        $("#savePrizeWeekBtn").show();
        $('#viewPrizeWeekModal').modal('show');
    });

    $("#savePrizeWeekBtn").on("click", function (e) {
        e.preventDefault();
        var url = "";
        if ($("#week_id").val() == "") {
            url = "{{ route('prize-week.store') }}";
        } else {
            url = "{{ route('prize-week.update') }}";
        }
        $.ajax({
            type: "POST",
            url: url,
            data: $('#weekForm').serialize(),
            success: function (data) {
                console.log(data);
                if (data.status == "success") {
                    $('#weekForm').trigger("reset");
                    $(".error_save_prize").text("");
                    $(".error_save_prize").hide();
                    $('#viewPrizeWeekModal').modal('hide');
                    Swal.fire({
                        text: data.message,
                        type: 'success',
                        confirmButtonText: 'Ok',
                        confirmButtonColor: "#F4C202"

                    }).then((result) => {
                        // Reload the Page
                        location.reload();
                    });
                } else {
                    $(".error_save_prize").text(data.message);
                    $(".error_save_prize").show();
                }
            },
            error: function (data) {
                // console.log('Error:', data);
            }
        });
    });

    function viewPrizeWeekDetails(week_id) {
        $.ajax({
            type: "POST",
            url: "{{ route('prize-week.show') }}",
            data: {
                week_id: week_id,
            },
            success: function (data) {
                console.log(data);
                if (data.status == "success") {
                    $('#weekForm').trigger("reset");
                    $(".error_save_prize").text("");
                    $(".error_save_prize").hide();
                    $("#week_id").val(data.data.id);
                    $("#prize_week").val(data.data.prize_week);
                    $("#prize_date").val(data.data.prize_date);
                    // $("#order_no").val(data.data.order_no);
                    if(data.data.status==1){
                        $("#savePrizeWeekBtn").show();
                    }else{
                        $("#savePrizeWeekBtn").hide();
                    }
                    $('#viewPrizeWeekModal').modal('show');

                }
            },
            error: function (data) {
                // console.log('Error:', data);
            }
        });
    }

    function deletePrizeWeekDetails(week_id) {
        Swal.fire({
            title: "Are you sure?",
            text: "You will not be able to recover this!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#F4C202",
            confirmButtonText: "Yes, delete it!",
        }).then((result) => {
                     
            if (result.isConfirmed)
                {
                $.ajax({
                    url: "{{ route('prize-week.delete') }}",
                    type: "POST",
                    data: {
                        week_id: week_id,
                    },
                    success: function (data) {
                        if (data.status == "success") {
                            Swal.fire({
                            text: data.message,
                            type: 'success',
                            confirmButtonText: 'Ok',
                            confirmButtonColor: "#F4C202"

                        }).then((result) => {
                            // Reload the Page
                            location.reload();
                        });
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                    }
                });
            }
        });
    }

    // ---------------------------Winner-------------------------------------
    function viewWinnerDetails(unique_id) {
        $.ajax({
            type: "POST",
            url: "{{ route('winner.show') }}",
            data: {
                unique_id: unique_id,
            },
            success: function (data) {
                console.log(data);
                if (data.status == "success") {
                    var winner = data.data.winner;
                    var prize = data.data.prize;
                    $('#winnerForm').trigger("reset");
                    $("#winner_prize").text(prize.prize_name);
                    $("#winner_prize_value").val(prize.prize_value);
                    $("#winner_unique_id").val(winner.unique_id);
                    $("#winner_name").val(winner.name);
                    $("#winner_phone").val(winner.phone);
                    $("#winner_q_id").val(winner.q_id);
                    $("#winner_imei_number").val(winner.imei_number);
                    $('#viewWinnerModal').modal('show');

                }
            },
            error: function (data) {
                // console.log('Error:', data);
            }
        });
    }

    // ----------------------------Settings --------------------------
    function viewSettings() {
        $.ajax({
            type: "POST",
            url: "{{ route('settings.show') }}",
            // data: {
            //     settings_id: settings_id,
            // },
            success: function (data) {
                console.log(data);
                if (data.status == "success") {
                    $("#settings_id").val(data.data.id);
                    $("#speed").val(data.data.speed);
                    $("#prize_week_id").val(data.data.prize_week_id);
                    $("#spin_time").val(data.data.spin_time);
                    $(".error_save_settings").text("");
                    $(".error_save_settings").hide();
                    $('#viewSettingsModal').modal('show');
                }
            },
            error: function (data) {
                // console.log('Error:', data);
            }
        });
    }

    // Settings update
    $("#saveSettingsBtn").on("click", function (e) {
        e.preventDefault();
        
        $.ajax({
            type: "POST",
            url: "{{ route('settings.update') }}",
            data: $('#settingsForm').serialize(),
            success: function (data) {
                console.log(data);
                if (data.status == "success") {
                    $('#settingsForm').trigger("reset");
                    $(".error_save_settings").text("");
                    $(".error_save_settings").hide();
                    $('#viewSettingsModal').modal('hide');
                    Swal.fire({
                        text: data.message,
                        type: 'success',
                        confirmButtonText: 'Ok',
                        confirmButtonColor: "#F4C202"

                    }).then((result) => {
                        // Reload the Page
                        location.reload();
                    });
                } else {
                    $(".error_save_settings").text(data.message);
                    $(".error_save_settings").show();
                }
            },
            error: function (data) {
                // console.log('Error:', data);
            }
        });
    });

    
    // Reset winners table
    function resetData() {
        Swal.fire({
            title: "Are you sure?",
            text: "You will not be able to recover this!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#F4C202",
            confirmButtonText: "Yes, delete it!",
        }).then((result) => {
                     
            if (result.isConfirmed)
                {
                $.ajax({
                    url: "{{ route('reset.raffledraw') }}",
                    type: "GET",
                    success: function (data) {
                        if (data.status == "success") {
                            Swal.fire({
                            text: data.message,
                            type: 'success',
                            confirmButtonText: 'Ok',
                            confirmButtonColor: "#F4C202"

                        }).then((result) => {
                            // Reload the Page
                            location.reload();
                        });
                        }
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                    }
                });
            }
        });
    }
    
</script>
@endsection