@extends('layouts.master')
@section('contain')
<div class="row page-titles" style="box-shadow: 0px 0px 14px 3px #cfcfcf; background: linear-gradient(45deg, rgb(241, 234, 234), transparent);border: 1px solid #cdcdcd;">
    <div class="col-md-5 align-self-center">
        <h3 class="text-themecolor">Appointment Dispute</h3>
    </div>
    <div class="col-md-7 align-self-center text-end">
        <div class="d-flex justify-content-end align-items-center">
            <ol class="breadcrumb justify-content-end">
                <li><a class="breadcrumb-item active" href="{{ url('/') }}">Home</a></li>
                {{-- <li class="breadcrumb-item active">User Table</li> --}}
            </ol>
            {{-- <a href="{{ Route('address.swform') }}"><button type="button" class="btn btn-info d-none d-lg-block m-l-15 text-white"><i class="fa fa-plus-circle"></i> Create
                New</button></a> --}}
        </div>
    </div>
</div>
<div class="card">
    <div class="card-body">
        {{-- <h6 class="card-subtitle">Data table example</h6> --}}
        <div class="table-responsive ">
            <table id="myTablehelp" class="table table-striped  border">
                <thead>
                    <tr style="background-color: gray" class="text-white">
                        <th>S.No</th>
                        <th>Name</th>
                        <th>Appointment Detail</th>
                        <th>Phone</th>
                        <th>Message</th>
                        {{-- <th>Status</th> --}}
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    @php
                    $num = 1;
                    @endphp
                    @foreach ($Hdata as $hData)
                    <tr>
                        <td>{{ $num++}}</td>
                        <td>{{ $hData->full_name??""}}</td>
                        <td>
                            <a href="{{Route('getUser.bookings',$hData->appointment_id)}}">
                                Go
                            </a>
                        </td>
                        <td>{{ $hData->phone??""}}</td>
                        <td style="max-width:100px;
                                  white-space: nowrap;
                                  overflow: hidden;
                                  text-overflow: ellipsis">{{ $hData->complain??""}}</td>
                        {{-- <td>{{ $hData->status??""}}</td> --}}
                        <td class="text-canter">
                            @if ($hData->user_type != "admin")
                            {{-- <a href="{{ Route('customer.edit', $hData->id) }}"><i title="Edit" class="far fa-edit" style="font-size:20px"></i></a> --}}
                            {{-- <a href="{{ Route('getUser.bookings', $hData->id) }}"> <i title="Booking Info" class="fa fa-info-circle" style="font-size:48px;color:rgb(71, 181, 196)"></i></a> --}}
                            <a type="button" data-bs-toggle="modal" data-bs-target="#exampleModal" data-whatever="@php  $vid = $hData->id @endphp " data-msg="{{$hData->complain}}" onclick="setMsg(this)"> <i title="read message " class="far fa-eye" style="font-size:20px"></i></a>

                            {{-- <a title="delete" onclick="swalll({{ $hData->id }})"><i class="fa fa-trash" style="font-size:20px"></i></a> --}}
                            <form id="delete-form-{{ $hData->id }}" action="{{ route('helpAndSupport.delete', $hData->id) }}" method="POST" class="d-none">
                                @csrf
                                @method('DELETE')
                            </form>
                            @else
                            <i style="text-decoration: underline;">Not Modify</i>
                            @endif
                        </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    </div>
    <!-- sample modal content -->
    <div class="modal" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel1">
        <div class="modal-dialog " role="document">
            <div class="modal-content" style="box-shadow: 0px 0px 14px 3px #cfcfcf; background: linear-gradient(45deg, rgb(27, 21, 21), transparent);border: 1px solid #6e6c6c;">
                <div class="modal-header">
                    <h4 class="modal-title text-white" id="exampleModalLabel1">Message</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></button>
                </div>
                <div class="modal-body">
                    <div class="table-responsive m-t-40">
                        <table id="myTable" class="table table-striped border">
                            <thead>
                                {{-- <tr class="text-white" style="background-color: gray">
                                        <th>Message</th>

                                    </tr> --}}
                            </thead>
                            <tbody>
                                {{-- {{dd($vehicleData)}} --}}
                                <tr>
                                    <td id="tdMdlMsg"></td>

                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default text-white" data-bs-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- /.modal -->
</div>
<script>
    // popupget msg method
    function setMsg(e) {
        $('#tdMdlMsg').html($(e).attr("data-msg"));
    }
    // popupget msg method end
    function test(id) {
        alert('jhjkjh');
    }

    function swalll(id) {
    event.preventDefault();
    Swal.fire({
        title: "Are you sure?",
        text: "Once deleted, you will not be able to recover this imaginary field!",
        icon: "warning",
        showCancelButton: true, // This displays the cancel button
        confirmButtonColor: "#d33",
        cancelButtonColor: "#3085d6",
        confirmButtonText: "Yes, delete it!",
        cancelButtonText: "Cancel" // Provide the text for the cancel button
    }).then((result) => {
        if (result.isConfirmed) {
            var formId = "delete-form-" + id;
            document.getElementById(formId).submit();
        }
    });
}

    $(function() {
        $('#myTablehelp').DataTable({
            columnDefs: [{
                orderable: false,
                "targets": 4
            }]
        });
        var table = $('#example').DataTable({
            "columnDefs": [{
                "visible": false,
                "targets": 2
            }],
            "order": [
                [2, 'asc']
            ],
            "displayLength": 25,
            "drawCallback": function(settings) {
                var api = this.api();
                var rows = api.rows({
                    page: 'current'
                }).nodes();
                var last = null;
                api.column(2, {
                    page: 'current'
                }).data().each(function(group, i) {
                    if (last !== group) {
                        $(rows).eq(i).before('<tr class="group"><td colspan="5">' + group +
                            '</td></tr>');
                        last = group;
                    }
                });
            }
        });
        // Order by the grouping
        $('#example tbody').on('click', 'tr.group', function() {
            var currentOrder = table.order()[0];
            if (currentOrder[0] === 2 && currentOrder[1] === 'asc') {
                table.order([2, 'desc']).draw();
            } else {
                table.order([2, 'asc']).draw();
            }
        });
        // responsive table
        $('#config-table').DataTable({
            responsive: true
        });
        $('#example23').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ]
        });
        $('.buttons-copy, .buttons-csv, .buttons-print, .buttons-pdf, .buttons-excel').addClass(
            'btn btn-primary me-1');
    });
</script>
@endsection