@include('admin.header')

<div class="container-fluid">
    <!--  Row 1 -->
    <div class="row py-3">
        <div class="col-lg-auto my-auto col-md-auto col-sm-auto">
            <h2>Manage {{ $data['activityData']['activityName'] }}</h2>
        </div>
        <div class="col-lg-auto text-end col-md-auto col-sm-auto ms-auto">
            <div class="row justify-content-end">
                <!-- <div class="col-lg-auto col-md-6 col-sm-6">
            <select class="form-select js-example-basic-single" aria-label="Default select example">
              <option selected Default>Select Status</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div> -->

                {{-- <div class="col-lg-auto col-md-5 col-sm-6">
                    <button type="button" class="btn btn-primary" onclick="getFrameDetail('insert')"><i
                            class="fa-light fa-plus me-2"></i> Add Template</button>
                </div>
                <div class="col-lg-auto col-md-5 col-sm-6">
                    <button type="button" class="btn btn-primary"><i class="fa-solid fa-file-excel me-2"></i>Download
                        Report</button>
                </div> --}}
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <div class="white_table">
                <table id="frameDataTable" class="table table-striped datatable" style="width:100%">
                    <thead>
                        <tr>
                            <th>Sr No</th>
                            <th>Template</th>
                            <th>Action</th>
                            <th>Status</th>
                            <th>Date & Time</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>01</td>
                            <td>
                                <a href="../images/poster.png" class="my-image-links">
                                    <img src="../images/poster.png" width="40px"
                                        style="border: 1px solid #782B90;border-radius:4px;">
                                </a>
                            </td>
                            <td>
                                <div class="bt_group">
                                    <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
                                        data-bs-target="#edit_brand">
                                        <span>
                                            <svg xmlns="http://www.w3.org/2000/svg" width="16.115" height="15.853"
                                                viewBox="0 0 16.115 15.853">
                                                <g id="Group_35317" data-name="Group 35317"
                                                    transform="translate(-1.25 -1.6)">
                                                    <path id="Path_21905" data-name="Path 21905"
                                                        d="M3.881,14.5h.082l2.2-.2a1.324,1.324,0,0,0,.81-.382l8.29-8.29a2.045,2.045,0,0,0,0-2.908l-.532-.532a2.11,2.11,0,0,0-2.916,0L10.754,3.242,3.529,10.467a1.276,1.276,0,0,0-.375.81l-.2,2.2a.963.963,0,0,0,.27.75.925.925,0,0,0,.66.277ZM13.273,2.7a.907.907,0,0,1,.66.277l.532.532a.925.925,0,0,1,0,1.319l-.66.66L11.954,3.639l.66-.66a.938.938,0,0,1,.66-.277Zm-9,8.68a.159.159,0,0,1,.052-.112l6.828-6.836L13,6.285,6.175,13.113a.313.313,0,0,1-.112.052l-1.971.18.18-1.971Zm13.095,5.509a.566.566,0,0,1-.562.562H1.812a.562.562,0,1,1,0-1.124H16.8A.566.566,0,0,1,17.365,16.891Z"
                                                        fill="#782b90" />
                                                </g>
                                            </svg>

                                        </span>
                                        Edit
                                    </button>
                                </div>
                            </td>
                            <td>
                                <div class="toggle">
                                    <input type="checkbox">
                                    <label></label>
                                </div>
                            </td>

                            <td>
                                <p class="mb-0">
                                    <span class="d-flex justify-content-center align-items-center"><i
                                            class="fa fa-calendar-alt me-2"></i>27/03/2021<br></span>
                                    <span class="d-flex justify-content-center align-items-center time_span"><i
                                            class="fa fa-clock me-2"></i>07:00AM</span>
                                </p>
                            </td>
                        </tr>

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

<div class="modal fade" id="add_edit_frame" tabindex="-1" aria-labelledby="addEditFrameModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title fs-5" id="addEditFrameModalLabel">Add Template</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><i
                        class="fa-solid fa-xmark"></i></button>
            </div>
            {!! Form::open([
                'url' => '#',
                'name' => 'add_edit_frame_form',
                'id' => 'add_edit_frame_form',
                'enctype' => 'multipart/form-data',
            ]) !!}
            <input type="hidden" name="type" id="type">
            <input type="hidden" name="activityID" id="activityID" value="{{ $data['activityData']['activityID'] }}">
            <input type="hidden" name="frameID" id="frameID">
            <div class="modal-body">
                <div class="col-12">
                    {{-- <div class="mb-3">
                        <label for="" class="form-label">Doctor Name</label>
                        <input type="text" class="form-control" id="" placeholder="Enter Doctor Name">
                    </div> --}}
                </div>
                <div class="col-12 ">
                    <div class="mb-3">
                        <label for="" class="form-label">Upload Photo</label>
                        <div class="upload_img_te">
                            {{-- <div class="left">
                                <img src="../images/user_img.png">
                            </div> --}}
                            <div class="right">
                                <div class="input_upload">
                                    <span>Upload</span>
                                    <input type="file" id="customFile" name="customFile" accept=".png">
                                </div>
                            </div>
                        </div>
                        <label id="customFile-error" class="error" for="customFile"></label>
                    </div>
                </div>
                <div class="col-12">
                    <div class="mb-3">
                        <label for="" class="form-label">Font Color Code</label>
                        <input type="color" class="form-control" id="fontColor" name="fontColor"
                            placeholder="Enter Color Code">
                    </div>
                </div>
                <div class="col-12 col-lg-4">
                    <div class="mb-3">
                        <label for="" class="form-label">Preview Template</label>
                        <div class="pre_top">
                            <img id="previewPoster" src="{{ asset('admin-assets/images/poster.png') }}">
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="submit" id="submit" class="btn btn-primary">Submit</button>
                <input type="button" class="btn btn-primary" data-bs-dismiss="modal" value="Cancel">
            </div>
            {!! Form::close() !!}
        </div>
    </div>
</div>



@include('admin.footer')

<script>
    $(document).ready(function() {

        $("#customFile").change(function() {
            // Get the selected file
            var file = this.files[0];
            if (file) {
                var reader = new FileReader();

                // Set a callback function to handle the file load
                reader.onload = function(e) {
                    // Update the src attribute of the image with the loaded file data
                    $("#previewPoster").attr("src", e.target.result);
                };

                // Read the file as a data URL (base64 encoded)
                reader.readAsDataURL(file);
            } else {
                // $("#previewPoster").attr("src", "{{ asset('admin-assets/assets/images/poster.png') }}");
                $("#previewPoster").attr("src", "#");
            }
        });

        $.validator.addMethod('filesize', function(value, element, param) {
            // param = size (en bytes)
            // element = element to validate (<input>)
            // value = value of the element (file name)
            return this.optional(element) || (element.files[0].size <= param)
        });

        $("#add_edit_frame_form").validate({
            ignore: ".ignore",
            rules: {
                fontColor: {
                    required: true,
                },
                type: {
                    required: true,
                },
                activityID: {
                    required: true,
                },
                //poster[]: {
                //    email: true,
                //},
            },
            messages: {},
            errorPlacement: function(error, element) {
                var placement = $(element).data("error");
                if (element.is("select")) {
                    error.appendTo(".error_msg_show");
                } else if (element.is(":checkbox")) {
                    error.appendTo(".radio_error_msg_show");
                } else if (placement) {
                    $(placement).append(error);
                } else {
                    error.insertAfter(element);
                }
            },
            submitHandler: function(form) {
                // return false;
                $("#submit").html('<span> Processing...</span>');
                $("#submit").attr('disabled', true);

                var formData = new FormData($("#add_edit_frame_form")[0]);
                $.ajax({
                    url: "{{ route('addEditFrame') }}",
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    dataType: "json",
                    success: function(response, textStatus, xhr) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        if (response.status == 1) {
                            $.notify(response.message, "success");
                            $("#add_edit_frame_form")[0].reset();
                            $("#add_edit_frame").modal('hide');
                            $("#frameDataTable").DataTable().ajax.reload(null,
                                false);
                        } else {
                            $("#submit").html('Submit');
                            $("#submit").attr('disabled', false);
                            $.notify(response.message, "error");
                        }
                    },
                    error: function(jqXHR, textStatus, errorThrown) {
                        // if (jqXHR.status == 422) {
                        $("#submit").html('Submit');
                        $("#submit").attr('disabled', false);
                        $.notify(jqXHR.responseJSON.message, "error");
                        // }
                    }

                }); //ajax
            }
        });


        var i = 1;
        var table = $('#frameDataTable').DataTable({
            scrollX: true,
            destroy: true,
            processing: true,
            serverSide: true,
            searching: false,
            // responsive: true,
            // autoWidth: true,
            ajax: {
                url: "{{ route('manageFramePagination') }}",
                data: function(d) {
                    d._token = "{{ csrf_token() }}",
                        d.activityID = "{{ $data['activityData']['activityID'] }}"
                    // d.division = $('#division option:selected').val()
                },
            },
            "drawCallback": function(settings) {
                new VenoBox({
                    selector: '.my-image-links',
                    numeration: true,
                    infinigall: true,
                    share: true,
                    spinner: 'rotating-plane'
                });
            },
            columns: [{
                    data: 'DT_RowIndex',
                    name: 'DT_RowIndex',
                    orderable: false,
                    searchable: false,
                },
                {
                    data: 'imageMedia',
                    searchable: true,
                    orderable: false,
                },
                {
                    data: 'action',
                    searchable: true,
                    orderable: false,
                },
                {
                    data: 'frameStatus',
                    searchable: true,
                    orderable: false,
                },
                {
                    data: 'created_at',
                    searchable: true,
                    orderable: false,
                }

            ],
            columnDefs: [{
                "aTargets": [1, 2, 3, 4], // Column to target
                "mRender": function(data, type, full) {
                    if (data != null) {
                        return data;
                    } else {
                        return '-';
                    }
                }
            }, ],
        });
    });
</script>

<script>
    function getFrameDetail(type, id = null) {
        $("#add_edit_frame_form")[0].reset();
        $("#add_edit_frame_form").validate().resetForm();
        $("#activityID").val("{{ $data['activityData']['activityID'] }}")
        // if (id != null) {
        $.ajax({
            url: "{{ route('getFrameDetail') }}",
            type: 'POST',
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $("#type").val(type);
                    $("#frameID").val(response.data.frameID);
                    $("#fontColor").val(response.fontColor);
                    $("#frameID").rules("add", {
                        required: true,
                        messages: {
                            required: "Frame ID is required.",
                        },
                    });
                    if (type == 'update') {
                        $("#addEditFrameModalLabel").html('Edit Template');
                        $("#previewPoster").attr("src", "{{ asset('assets/original_poster') }}" + '/' +
                            response.data.imageMedia);
                        $("#customFile").rules("remove");
                        $("#customFile").rules("add", {
                            filesize: 2097152,
                            messages: {
                                filesize: "File size must be less than 2 MB."
                            },
                        });
                    } else {
                        $("#addEditFrameModalLabel").html('Add Template');
                        $("#previewPoster").attr("src", "{{ asset('assets/original_poster') }}" + '/' +
                            response.data.imageMedia);
                        $("#customFile").rules("remove");
                        // $("#previewPoster").attr("src",
                        //     "{{ asset('admin-assets/assets/images/poster.png') }}");
                        $("#customFile").rules("add", {
                            required: true,
                            filesize: 2097152,
                            messages: {
                                required: "This field is required.",
                                filesize: "File size must be less than 2 MB."
                            },
                        });
                    }
                    $("#add_edit_frame").modal('show');
                } else
                    $.notify(response.message, "error");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        }); //ajax
        // } else {

        //     $("#addEditFrameModalLabel").html('Add Template');
        //     $("#type").val(type);
        //     $("#customFile").rules("add", {
        //         required: true,
        //         messages: {
        //             required: "This field is required.",
        //         },
        //     });
        //     $("#frameID").rules("remove");
        //     $("#previewPoster").attr("src", "{{ asset('admin-assets/assets/images/poster.png') }}");
        //     $("#add_edit_frame").modal('show');
        // }

    }

    function status(id) {
        $.ajax({
            url: "{{ route('frameStatusChange') }}",
            type: 'POST',
            data: {
                'id': id,
                '_token': "{{ csrf_token() }}"
            },
            dataType: "json",
            success: function(response, textStatus, xhr) {
                if (response.status == 1) {
                    $.notify(response.message, "success");
                } else
                    $.notify(response.message, "error");
            },
            error: function(jqXHR, textStatus, errorThrown) {
                $.notify(jqXHR.responseJSON.message, "error");
            }
        });
    }
</script>