@extends('modules.head') @section('contenido')

<form class="form-inline formFilter" id="form-source">
    @csrf
    @if (\Session::has('error'))
    <div class="alert alert-danger" style="display:none">
        <ul>
            <li id="error_content">{!! \Session::get('error') !!}</li>
        </ul>
    </div>
    @endif
    <div class="form-group">
        <label for="sourceName">Source name</label>
        <input type="text" class="form-control" id="sourceName" name="sourceName">
    </div>
    <button class="btn btn-default" id="button_add_source">Add</button>
</form>

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Sources</h3>
    </div>
    <div class="box-body table-responsive hideScrollOffset">
        <table id="sources_list" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info">
            <thead>
                <tr role="row">
                    <th tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Code</th>
                    <th tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Name</th>
                    <th tabindex="0" aria-controls="example2" rowspan="1" colspan="1">Expired</th>
                </tr>
            </thead>
            <tbody>
                @foreach($sources as $source)
                <tr>
                    <td>{{ $source->id }}</td>
                    <td>{{ $source->name }}</td>
                    <td>
                    @if(!$source->is_permanent)
                        @if(!$source->is_expired)
                        <div class="checkbox checbox-switch switch-success">
                            <label> No
                                <input type="checkbox" class="form-control" value="{{ $source->id }}" name="expired_source" />
                                <span></span>
                                Yes
                            </label>
                        </div>
                        @else
                        <div class="checkbox checbox-switch switch-success">
                            <label> No
                                <input type="checkbox" class="form-control" value="{{ $source->id }}" name="expired_source" checked="" />
                                <span></span>
                                Yes
                            </label>
                        </div>
                        @endif
                    @endif
                    </td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<form class="form-inline formFilter" id="form-source">
    @csrf
    @if (\Session::has('error'))
    <div class="alert alert-danger" style="display:none">
        <ul>
            <li id="error_content">{!! \Session::get('error') !!}</li>
        </ul>
    </div>
    @endif
    <div class="form-group">
        <label for="hearAboutWayName">Hear about way</label>
        <input type="text" class="form-control" id="hearAboutWayName" name="hearAboutWayName">
    </div>
    <button class="btn btn-default" id="button_add_hear_about">Add</button>
</form>

<div class="box">
    <div class="box-header">
        <h3 class="box-title">Hear about ways</h3>
    </div>
    <div class="box-body table-responsive hideScrollOffset">
        <table id="sources_list" class="table table-bordered table-hover dataTable" role="grid" aria-describedby="example2_info" ">
            <thead>
                <tr role=" row">
            <th tabindex="0" aria-controls="example2" rowspan="1" colspan="1" width="20%">Active</th>
            <th tabindex="0" aria-controls="example2" rowspan="1" colspan="10">Name</th>
            </tr>
            </thead>
            <tbody>
                @foreach($hear_about_ways as $hear_about_way)
                <tr>
                    <td>
                        @if ( $hear_about_way->active )
                        <input type="checkbox" class="chk" id="activeHearAbout" name="activeHearAbout" style="opacity:1" checked value={{$hear_about_way->id}}>
                        @else
                        <input type="checkbox" class="chk" id="activeHearAbout" name="activeHearAbout" style="opacity:1" value={{$hear_about_way->id}}>
                        @endif
                    </td>
                    <td>{{ $hear_about_way->name }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<script src="{{ asset('js/jQuery/jquery-2.2.3.min.js') }}"></script>
<script src="{{ asset('js/bootstrap/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('js/dropzone/dropzone.js') }}"></script>
<script type="text/javascript">
    $(function() {
        $("#button_add_source").click(function(e) {
            e.preventDefault()

            let data = {
                sourceName: $('#sourceName').val()
            }

            $.ajax({
                type: "POST",
                dataType: "json",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                data: data,
                url: '/createsource',
                success: function(response) {

                    if (response.status) {
                        swal({
                            title: "Success",
                            text: response.message,
                            icon: "success"
                        }).then((val) => {
                            if (val) {
                                $('#sourceName').val("")
                                location.reload(true);
                            }
                        })
                    } else {
                        swal({
                            title: "Alert",
                            text: response.message,
                            icon: "warning"
                        })
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });
        $("#button_add_hear_about").click(function(e) {
            e.preventDefault()
            let data = {
                hearAboutWayName: $('#hearAboutWayName').val()
            }
            $.ajax({
                type: "POST",
                dataType: "json",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                data: data,
                url: '/createHearAboutWay',
                success: function(response) {
                    if (response.status) {
                        swal({
                            title: "Success",
                            text: response.message,
                            icon: "success"
                        }).then((val) => {
                            if (val) {
                                $('#hearAboutWayName').val("")
                                location.reload(true);
                            }
                        })
                    } else {
                        swal({
                            title: "Alert",
                            text: response.message,
                            icon: "warning"
                        }).then(() => {
                            location.reload(true);
                        })
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });
        $(".chk").click(function(e) {
            let active = $(this).prop('checked');
            let id = $(this).prop('value');
            console.log(id);
            let data = {
                active: active,
                id: id
            }
            $.ajax({
                type: "POST",
                dataType: "json",
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                data: data,
                url: '/updateHearAboutWays',
                success: function(response) {
                    if (active) {
                        swal({
                            title: "Success",
                            text: "Status updated",
                            icon: "success"
                        })
                    } else {
                        swal({
                            title: "Success",
                            text: "Status updated",
                            icon: "success"
                        })
                    }
                },
                error: function(e) {
                    console.log(e);
                }
            });
        });
    });

    // Handling source expiration
    $("input[name='expired_source']").each(function() {
        $(this).click(function() {
            let sourceId = $(this).val();
            if (!$(this).is(':checked')) {
                confirmBeforeUpdate("Are you sure you want this source to be active?", sourceId);
            } else {
                confirmBeforeUpdate("Are you sure you want this source to be expired?", sourceId);
            }
        });
    });

    // Show confirmation modal before update
    function confirmBeforeUpdate(message, sourceId) {
        swal(message, {
            dangerMode: true,
            buttons: true,
        }).then(function(ok) {
            if (ok) {
                updateSourceExpiration(sourceId);
            } else {
                location.reload();
            }
        });
    }

    // Send source id to server to update expiration field
    function updateSourceExpiration(sourceId) {

        let data = {
            source_id: sourceId,
        }

        $.ajax({
            url: "/source/update-expiration",
            type: "POST",
            contentType: "application/json",
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr(
                    "content"
                ),
                "Content-Type": "application/json",
            },
            data: JSON.stringify(data),
            success: function(r) {
                if (r.status) {
                    let expiration_state = r.source.is_expired ? "expired" : "active";
                    swal('', `Source "${r.source.name}" is now ${expiration_state}.`, 'success');
                } else {
                    swal('', 'Source could not be updated.', 'info');
                }
            },
            error: function(e) {
                console.log(e);
            },
        });

    }
</script>

@endsection