@extends('retailer.master')
@section('main')
    <main id="js-page-content" role="main" class="page-content">
        <ol class="breadcrumb page-breadcrumb">
            <li class="breadcrumb-item"><a href="javascript:void(0);">Claims</a></li>
            <li class="breadcrumb-item">New Claim</li>
            <li class="position-absolute pos-top pos-right d-none d-sm-block"><span class="js-get-date"></span></li>
        </ol>
        <div class="subheader">
            <h1 class="subheader-title">
                <i class='subheader-icon fal fa-table'></i> New <span class='fw-300'>Claims</span>
                <small>
                   Here you can see all of you new claims.
                </small>
            </h1>
        </div>
        <div class="row">
            <div class="col-xl-12">
                <div id="panel-1" class="panel">
                    <div class="panel-hdr">
                        <h2>
                            Claims
                        </h2>
                        <div class="panel-toolbar">
                            <button class="btn btn-panel" data-action="panel-collapse" data-toggle="tooltip" data-offset="0,10" data-original-title="Collapse"></button>
                            <button class="btn btn-panel" data-action="panel-fullscreen" data-toggle="tooltip" data-offset="0,10" data-original-title="Fullscreen"></button>
                            <button class="btn btn-panel" data-action="panel-close" data-toggle="tooltip" data-offset="0,10" data-original-title="Close"></button>
                        </div>
                    </div>
                    <div class="panel-container show">
                        <div class="panel-content">
                            <!-- datatable start -->
                            <table id="dt-basic-example" class="table table-bordered table-hover table-striped w-100">
                                <thead>
                                <tr>
                                    <th>Claim ID</th>
                                    <th>Customer Name</th>
                                    <th>Admin</th>
                                    <th>Retailer </th>
                                    <th>Retailer User</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tfoot>
                                <tr>
                                    <th>Clam ID</th>
                                    <th>Customer Name</th>
                                    <th>Admin</th>
                                    <th>Retailer </th>
                                    <th>Retailer User</th>
                                    <th>Status</th>
                                    <th>Action</th>
                                </tr>
                                </tfoot>
                            </table>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
@endsection
@section ('script')
    <script>
        $(document).ready(function() {
            $('#new_claims').addClass('active');
            $('#claims').addClass('active open');

            var claimsTable = $('#dt-basic-example').DataTable( {
                dom: "Bfrtip",
                ajax: "jsonNewClaims",
                columns: [
                    /*{
                        className:      'details-control',
                        orderable:      false,
                        data:           null,
                        defaultContent: ''
                    },*/
                    { data: "id" },
                    {
                        targets: 1,
                        data: function ( row, type, val, meta ) {
                            return row.customer.first_name + " " + row.customer.last_name;
                        }
                    },
                    {
                        targets: 2,
                        data: function ( row, type, val, meta ) {
                            return row.admin.first_name + " " + row.admin.last_name;
                        }
                    },
                    {
                        targets: 3,
                        data: function ( row, type, val, meta ) {
                            return row.retailer_user.first_name + " " + row.retailer_user.last_name;
                        }
                    },
                    { data: "customer.first_name" },
                    { data: "claim_status.name" },
                    {
                        targets: 6,
                        data: "id",
                        render: function ( data, type, row, meta ) {
                            var actions ;
                                actions =
                                    `<a href="claim/${data}"` +
                                    'class="btn btn-sm btn-link">' +
                                    '<i class="fal fa-window-restore"></i> View'+
                                    '</a>'

                            return actions;
                        }
                    },
                ],
            } );

            /*$('#dt-basic-example').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = claimsTable.row( tr );

                if ( row.child.isShown() ) {
                    row.child.hide();
                    tr.removeClass('shown');
                }
                else {
                    row.child( format(row.data()) ).show();
                    tr.addClass('shown');
                }
            } );*/

            /*function format ( rowData ) {
                var div = $('<div/>')
                    .addClass( 'loading' )
                    .text( 'Loading...' );
                $.ajax( {
                    url: 'jsonClaims',
                    data: {
                        name: rowData.name
                    },
                    dataType: 'json',
                    success: function ( json ) {
                        div
                            .html(  `<div class="panel-container show">
                            <div class="panel-content">
                            <div class="row">
                            <div class="col-auto">
                            <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
                            <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">
                            <i class="fal fa-home"></i>
                            <span class="hidden-sm-down ml-1"> Claim Decision</span>
                            </a>
                            <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">
                            <i class="fal fa-user"></i>
                            <span class="hidden-sm-down ml-1"> Claim Defence</span>
                            </a>
                            <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">
                            <i class="fal fa-envelope"></i>
                            <span class="hidden-sm-down ml-1"> Eligibility </span>
                            </a>
                            <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">
                            <i class="fal fa-cog"></i>
                            <span class="hidden-sm-down ml-1"> Claim Final Comments</span>
                            </a>
                            </div>
                            </div>
                            <div class="col">
                            <div class="tab-content" id="v-pills-tabContent">
                            <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
                            <h3>
                            Claim Decision
                            </h3>
                            <p> Todo </p>

                        </div>
                        <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">
                            <h3>
                            Claim Defence
                            </h3>
                            <div class="d-flex flex-row rounded-top mb-3">
                            <div class="d-flex flex-row align-items-center mt-1 mb-1">
                            <span class="mr-2">
                            <img src="img/demo/avatars/avatar-admin.png" class="rounded-circle profile-image" alt="Dr. Codex Lantern">
                            </span>
                            <div class="info-card-text">
                            <div class="fs-lg text-truncate text-truncate-lg">Dr. Codex Lantern</div>
                        <span class="text-truncate text-truncate-md opacity-80">drlantern@gotbootstrap.com</span>
                        </div>
                        </div>
                        </div>
                        <p>
                        Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.
                        </p>
                        <p>
                        Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic.
                        </p>
                        </div>
                        <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
                            <h3>
                            Eligibility
                            </h3>
                            <ul class="notification">
                                <li>
                                    <a href="#" class="d-flex align-items-center py-2 px-0">
                                        <span class="d-flex flex-column flex-1">
                                            <span class="name">Todo</span>
                                            <span class="msg-a fs-sm">Todo</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="d-flex align-items-center py-2 px-0">
                                        <span class="d-flex flex-column flex-1">
                                            <span class="name">Adison Lee</span>
                                            <span class="msg-a fs-sm">Msed quia non numquam eius</span>
                                        </span>
                                    </a>
                                </li>
                                <li>
                                    <a href="#" class="d-flex align-items-center py-2 px-0">
                                        <span class="d-flex flex-column flex-1">
                                            <span class="name">Oliver Kopyuv</span>
                                            <span class="msg-a fs-sm">Msed quia non numquam eius</span>
                                        </span>
                                    </a>
                                </li>
                            </ul>
                            </div>
                        <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
                            <h3>Claim Final Comments</h3>
                            <div class="alert alert-success">
                            <strong>
                            Settings saved
                        </strong>
                        <p class="m-0">
                            All your settings changes have been saved!
                        </p>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>
                        </div>` )
                            .removeClass( 'loading' );
                    },
                    error : function (  ) {
                        div
                            .html( "error" )
                            .removeClass( 'loading' );
                    },
                } );

                return div;
            }*/

        });
    </script>
@endsection