@extends('layouts/contentLayoutMaster')

@section('title', 'Diamond Carat')

@section('vendor-style')
    <link rel="stylesheet" href="{{ asset(mix('vendors/css/extensions/toastr.min.css')) }}">
@endsection
@section('page-style')
    <link rel="stylesheet" href="{{ asset(mix('css/base/plugins/extensions/ext-component-toastr.css')) }}">
@endsection

@section('content')
    <div class="card">
        <div class="card-header">
            @if((Auth::user()->role == "SUPER_ADMIN" || Auth::user()->role == "ADMIN" || Auth::user()->role == "PURCHASE_MANAGER") && (Auth::user()->metal_type == "diamond"))
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add-carat">Add Carat</button>
            @endif
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <th>No.</th>
                            <th>Carat</th>
                            <th>ShortCode</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody id="list">
                        
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    
    <div class="modal fade text-start" id="add-carat" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form id="add_carat_form">
                <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel17">Add New Carat</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="text" id="carat" class="form-control mb-2" name="carat" placeholder="Carat ">
                    <input type="text" id="short_code" class="form-control mb-2" name="short_code" placeholder="Short Code">
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" onclick="js:createCarat('{{ $token }}')">Save</button>
                </div>
                </form>
            </div>
        </div>
    </div>
    <div class="modal fade text-start" id="edit-carat" tabindex="-1" aria-labelledby="myModalLabel17" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg">
            <div class="modal-content">
                <form id="edit_carat_form">
                <div class="modal-header">
                  <h4 class="modal-title" id="myModalLabel17"> Edit Carat</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <input type="hidden" id="id" name="id" class="form-control mb-2" >
                    <input type="text" id="carat" class="form-control mb-2" name="carat" placeholder="Carat">
                    <input type="text" id="short_code" class="form-control mb-2" name="short_code" placeholder="Short Code">
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-primary" onclick="js:editCarat('{{ $token }}')">Update</button>
                </div>
                </form>
            </div>
        </div>
    </div>
@endsection

@section('vendor-script')
    <script src="{{ asset(mix('vendors/js/extensions/toastr.min.js')) }}"></script>
@endsection

@section('page-script')
    <script src="{{ asset(mix('js/scripts/custom/common.js')) }}"></script>
    <script>
    $(document).ready(function() {
        caratList('<br />
<b>Warning</b>:  Undefined variable $token in <b>/home2/dev22ks/public_html/resources/views/app/diamond_jewellery/masters/carat.blade.php</b> on line <b>87</b><br />
',1,25);
    });
    
    function caratList(token,page_no,perpage){
    let from_date = $("#from_date").val();
    let till_date = $("#till_date").val();
    var per_page = $('#per-page').val();
    
    
    //var type = $('#type').val();
    $.ajax({
        url: "/api/diamond-jewellery/caratList",
        type: "get",
        dataType: "json",
        headers: {
            Authorization: "Bearer " + token,
        },
        data: {
            page:page_no,
            per_page:per_page,
        },
        success: function (response) {
           // console.log('in custom order list response = '+response);
            $("#pagination-links").empty();
            $('#list').empty();
            var i = 0;
        
        response.data.forEach(response_data => {
            i++;
            var list = '<tr id="'+response_data.id+'">'
            +'<td>'+i+'</td>'
            +'<td>'+response_data.carat+'</td>'
            +'<td>'+response_data.short_code+'</td>'
            +'<td><button type="button" class="btn btn-success edit" data-bs-toggle="modal" data-bs-target="#edit-carat" onclick="js:getCarat(\''+token+'\','+response_data.id+')">Edit</button></td>'
            +'</tr>';
            $('#list').append(list);
        });

        response.links.forEach(element => {
            let url_page_no = 1;
            if (element.url != null) {
                url_page_no = element.url.split('?')[1].split('=')[1];   
            }
            $("#pagination-links").append(`<button onclick="js:caratList('`+token+`',${url_page_no}, ${per_page})" class="btn btn-dark">${element.label}</button>`);
        });
        $('#totalofrecord').text('Total No. of Records = '+response.total);
    },
    });
}

    function getCarat(token,id){
    var id = id;
    try{
        $.ajax({
            url: "/api/diamond-jewellery/caratDetail",
            type: "get",
            dataType: 'json',
            headers: {
                'Authorization': 'Bearer '+token 
            },
            data:{
                'id':id
            },
            success: function(response){
                $('#edit-carat #id').val(response.id);
                $('#edit-carat #carat').val(response.carat);
                $('#edit-carat #short_code').val(response.short_code);
            }
        });
    }catch(e){
        console.log(e);
    }
}
    function editCarat(token){
        var formData = new FormData(document.getElementById('edit_caratt_form'));
        try{
            $.ajax({
                url: "/api/diamond-jewellery/editCarat",
                type: "post",
                dataType: 'json',
                headers: {
                    'Authorization': 'Bearer '+token 
                },
                data:formData,
                cache:false,
                async:false,
                contentType:false,
                processData:false,
                success: function(response){
                    console.log(response);
                    $('#edit-carat').modal('hide');
                    $('#edit_carat_form')[0].reset();
                    setTimeout(function () {
                        toastr["success"](
                            "",
                            response.msg,
                            {
                                closeButton: false,
                                tapToDismiss: false,
                                rtl: "rtl",
                            }
                        );
                    }, 2000);
                    caratList(token,1,25);
                }
            });
        }catch(e){
            console.log(e);
        }
    }
    function createCarat(token){
        var formData = new FormData(document.getElementById('add_carat_form'));
        try{
            $.ajax({
                url: "/api/diamond-jewellery/addCarat",
                type: "post",
                dataType: 'json',
                headers: {
                    'Authorization': 'Bearer '+token 
                },
                data:formData,
                cache:false,
                async:false,
                contentType:false,
                processData:false,
                success: function(response){
                    //console.log(response);
                    $('#add-carat').modal('hide');
                    $('#add_carat_form')[0].reset();
                    setTimeout(function () {
                        toastr["success"](
                            "",
                            response.msg,
                            {
                                closeButton: false,
                                tapToDismiss: false,
                                rtl: "rtl",
                            }
                        );
                    }, 2000);
                    caratList(token,1,25);
                }
            });
        }catch(e){
            console.log(e);
        }
    }    
       
    </script>
@endsection