@extends('admin.admin_app')

@section('content')
<div class="content-wrapper">

    <div class="container-xxl flex-grow-1 container-p-y">
        <div class="card">
        <h5 class="card-header">Social Links  &nbsp;&nbsp;<a href="{{ route('social.add') }}" type="button" class="btn btn-primary">Add new link</a></h5>
        <div class="card-body">

        <div id="login_error"></div>
        <div id="login_success">
            @if(session()->has('success'))
            <div class="alert alert-success" role="alert">
                {{ session()->get('success') }}
            </div>
            @endif
        </div>

            <form>
                <div class="row mb-3">
                    <div class="col-md-3">
                        <label for="date_from" class="form-label">Type :</label>
                        <select name="type" id="type" class="form-select">
                            <option value=""> --- Select Type ---</option>
                            @if(!empty($social_type))
                                @foreach ($social_type as $type)
                                    <option value="{{ $type->type }}">{{ str_replace('_',' ',(ucfirst($type->type))) }}</option>
                                @endforeach
                            @endif
                        </select>
                    </div>
                    <div class="col-md-3">
                        <button type="button" id="get_data" name="submit" class="btn btn-primary mt-4">Apply</button>
                        <button type="button" id="reset" class="btn btn-primary mt-4"><i class="bx bx-reset"></i></button>
                    </div>
                </div>
            </form>

            <div class="table-responsive mt-3">
                <table class="table table-bordered data-table" id="social_table">
                    <thead>
                        <tr>
                        <th>Sr No.</th>
                        <th>Name</th>
                        <th>Type</th>
                        <th>Image</th>
                        <th>Svg Image</th>
                        <th>Base Link</th>
                        <th>Popup Title</th>
                        <th>Popup Description</th>
                        <th>Status</th>
                        <th>Created Date</th>
                        <th>Actions</th>
                        </tr>
                    </thead>
                <tbody>

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


<!-- Model -->
<div class="modal fade" id="view_modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalCenterTitle">Edit</h5>
                <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
                ></button>
            </div>
            <div class="modal-body">
                <form action="{{ route('social.update') }}" id="social_link" method="POST">
                @csrf
                @method('POST')
                    <input type="hidden" name="tmp_id" id="tmp_id">
                    <div class="row">
                        <div class="col mb-3">
                        <label class="form-label">Base Link</label>
                        <input type="text" id="base_link" name="base_link" class="form-control">
                        </div>
                    </div>
                    <div class="row g-2">
                        <div class="col mb-0">
                        <label class="form-label">Popup Title</label>
                            <textarea id="popup_title" name="popup_title" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col mb-0">
                        <label class="form-label">Popup Description</label>
                            <textarea id="popup_description" name="popup_description" class="form-control" rows="8"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="submit" id="submit" class="btn btn-primary">Submit</button>
            </div>
        </div>
    </div>
</div>
@endsection

@section('script')
<script type="text/javascript">

    var table = $('#social_table').DataTable({
        processing: true,
        serverSide: true,
        stateSave: true,
        stateSaveParams: function(settings,data){
            data.type = $('#type').val()
        },
        stateLoadParams: function(settings,data){
            $('#type').val(data.type)
        },
        ajax:{
            url : "{{ route('social.index') }}",
            "data": function ( d ) {
                d.type = $('#type').val();
            }
        },
        order: [[0, 'desc']],
        columns: [
            {data: 'DT_RowIndex', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'type', name: 'type'},
            {data: 'image', name: 'image'},
            {data: 'svg_image', name: 'svg_image'},
            {data: 'base_link', name: 'base_link'},
            {data: 'app_info_popup_title', name: 'app_info_popup_title'},
            {data: 'app_info_popup_description', name: 'app_info_popup_description'},
            {data: 'status', name: 'status'},
            {data: 'created_at', name: 'created_at'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });

    $('#get_data').click(function(){
        table.ajax.reload();
    });

    $('#reset').click(function(){
        $('#type').val('');
        $('#social_table').dataTable().fnDraw();
    });

    $(document).on('change','.status', function(){
        var status = $(this).is(':checked');
        var id = $(this).attr('id');
        $.ajax({
            type : 'POST',
            url : "{{ route('social.status') }}",
            data : {status : status,id:id},
            success:function(data){
                if(data.status == '1'){
                    setTimeout(() => {
                        $('#login_success').html('<div class="alert alert-success" role="alert">'+ data.message +'</div>');
                    }, 1000);
                    return false;
                }
                if(data.status == '0'){
                    setTimeout(() => {
                        $('#login_error').html('<div class="alert alert-danger" role="alert">'+ data.message +'</div>');
                    }, 1000);
                    return false;
                }
            }          
        })
    });

    $(document).on('click','#editModel', function(){
        var id = $(this).attr('data-id');
        $.ajax({
            url : "{{ route('social.view') }}",
            type: "POST",
            data : {id:id,"_token": "{{ csrf_token() }}"},
            dataType : 'JSON',
            success: function(result) {
                var base_link = result.base_link;
                var popup_title = result.popup_title;
                var popup_description = result.popup_description;
                $('#view_modal').modal("show");
                $('#tmp_id').val(id);
                $('#base_link').val(base_link);
                $('#popup_title').val(popup_title);
                $('#popup_description').val(popup_description);
            }
        });
    });

    $(document).on('click','#submit', function(){
        var id = $('#tmp_id').val();
        var base_link = $('#base_link').val();
        var popup_title = $('#popup_title').val();
        var popup_description = $('#popup_description').val();
        $.ajax({
            url : "{{ route('social.update') }}",
            type: "POST",
            data : {id:id,base_link:base_link,popup_title:popup_title,popup_description:popup_description},
            dataType : 'JSON',
            success:function(data){
                $('#view_modal').modal("hide");
                if(data.status == '1'){
                    $('#login_success').html('<div class="alert alert-success" role="alert">'+ data.message +'</div>');
                    table.ajax.reload();
                }
            },
            error:function(e){
                $('#loading').hide();
                return false;
            }
        });
    });
</script>
@endsection