@extends('layouts.app') {{-- Include the layout --}}

@section('content')
@include('loader')

<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Manage Currency</div>
                <div class="card-body">
                    @if (session('success'))
                        <div class="alert alert-success custom-alert">
                            {{ session('success') }}
                        </div>
                    @endif
                    
                    @if (session('error'))
                        <div class="alert alert-danger custom-alert">
                            {{ session('error') }}
                        </div>
                    @endif
                    
                    @if (isset($error_message))
                        <div class="alert alert-danger custom-alert">
                            {{ isset($error_message) ? $error_message : '' }}
                        </div>
                    @endif
                    
                    <form method="POST" action="{{ route('updateCurrency') }}">
                        @csrf

                        <input type="hidden" id="currencyid" name="currencyid" value="0" class="form-control">
                        <div class="form-group">
                            <label for="currencyname">Currency Name <span class="text-danger">*</span></label> 
                            <input type="text" id="currencyname" name="currencyname" value="{{ isset($currencyname) ? $currencyname : '' }}" class="form-control" required>
                            <div class="invalid-feedback">
                                Please enter the Currency Name.
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="currencysymbol">Currency Symbol <span class="text-danger">*</span></label> 
                            <input type="text" id="currencysymbol" name="currencysymbol" value="{{ isset($currencysymbol) ? $currencysymbol : '' }}" class="form-control" required>
                            <div class="invalid-feedback">
                                Please enter the Currency Symbol.
                            </div>
                        </div>
                                
                        <div class="form-group">
                            <label for="currencyrate">Currency Rate <span class="text-danger">*</span></label>
                            <input type="float" id="currencyrate" name="currencyrate" value="{{ isset($currencyrate) ? $currencyrate : '' }}" class="form-control" required>
                            <div class="invalid-feedback">
                                Please enter the Currency Rate.
                            </div>
                        </div>

                        <br>
                        
                        <div style="text-align:right">
                            <button type="submit" class="btn btn-success" id="savebtn">Add New</button>
                            <button type="button" class="btn btn-danger" id="deletebtn" style="display:none">Delete</button>
                        </div> 
                    </form>
                    <br>
                </div>
            </div>
            <br>
            <div class="card">
                <div class="card-header">Currency List</div>
                <div class="card-body">
                    <table class="table table-bordered text-center table-sm">
                            <thead>
                                <tr>
                                    <th>Sr.</th>
                                    <th>ID</th>
                                    <th>Currency <span class="text-danger">*</span></th>
                                    <th>Symbol <span class="text-danger">*</span></th>
                                    <th>Rate <span class="text-danger">*</span></th>
                                    <th colspan="3">Action</th>
                                    
                                </tr>
                            </thead>
                            <tbody>
                                 @php
                                    $count=0;
                                 @endphp
                                 @foreach($currencylist as $list)
                                    <tr id="currencyrow{{ $list->id }}">
                                        <td>{{++$count}}</td>
                                        <td>{{ $list->id }}</td>
                                        <td> 
                                            <input type="text" id="currencyname{{ $list->id }}" value="{{ $list->name }}" class="form-control">
                                        </td>
                                        
                                        <td> 
                                            <input type="text" id="currencysymbol{{ $list->id }}" value="{{ $list->symbol }}" class="form-control">
                                        </td>

                                        <td style="text-align:left !important">
                                             <input type="text" id="currencyrate{{ $list->id }}" value="{{ round($list->rate,4) }}" class="form-control">
                                        </td>

                                        <td>
                                            <a href="javascript:updateCurrency({{ $list->id }})" title="Update">
                                                <span class="text-success">
                                                <i class="far fa-save"></i>
                                                </span>
                                            </a>    
                                
                                        </td>
                                        <td>
                                            <a href="javascript:editCurrency({{ $list->id }})" title="Edit">
                                                <span class="text-primary">
                                                <i class="fas fa-edit"></i>
                                                </span>
                                            </a>
                                        </td>
                                        <td>
                                            <a href="javascript:delCurrency({{ $list->id }})" title="Delete">
                                                <span class="text-danger">
                                                    <i class="fas fa-trash-alt"></i>
                                                </span>
                                            </a>    
                                        </td>
                                    
                                    </tr>
                                @endforeach
                            </tbody>
                    </table>        
                </div>
            </div>    
            
        </div>
    </div>
</div> 





<script>

$('#savebtn').on('click', function(event) {
    var form = event.target.form;

    if (!form.checkValidity()) {
        event.preventDefault();
    }

    $(form).addClass('was-validated');
    
});



$("#currencyid").change(function() {
    var currencyid=$('#currencyid').val();
    editCurrency(currencyid);
});

function editCurrency(currencyid){
    
    if(currencyid>0)
    {
        var currencyname = $('#currencyname' + currencyid).val();
        var currencysymbol = $('#currencysymbol' + currencyid).val();
        var currencyrate = $('#currencyrate' + currencyid).val();

        $('#currencyname').val(currencyname);
        $('#currencysymbol').val(currencysymbol);
        $('#currencyrate').val(currencyrate);
        $('#currencyid').val(currencyid);
        $('#savebtn').text('Update');
        $('#deletebtn').show();
        
    }
    else {
        $('#currencyname').val('');
        $('#currencysymbol').val('');
        $('#currencyrate').val('');
        $('#currencyid').val(0);
        $('#savebtn').text('Add New');
        $('#deletebtn').hide();
    }
    
}


$("#deletebtn").on('click', function() {
    var currencyid=$('#currencyid').val();
    delCurrency(currencyid);
});
    

function delCurrency(currencyid){

   
    
    if(currencyid>0)
    {
        Swal.fire({
            title: 'Are you sure?',
            icon: 'warning',
            width: '300px',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Yes, delete it!'
        }).then((result) => {
            if (result.isConfirmed) {
                
                $.ajax({
                    type: 'DELETE',
                    url: '{{ route('deleteCurrency', '') }}/' + currencyid,
                    data: {
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(response) {
                        
                        if (response.error) {
                            Swal.fire({
                                title: response.error,
                                icon: 'error',
                                width: '300px',
                                customClass: {
                                    title: 'swal-title'
                                }
                            });
                        } else if (response.success) {
                            
                            Swal.fire({
                                title: response.success,
                                icon: 'success',
                                width: '300px',
                                customClass: {
                                    title: 'swal-title'
                                },
                                showConfirmButton: true,
                            });
                            
                            $('#currencyid option[value="' + currencyid + '"]').remove();
                            $('#currencyname').val('');
                            $('#currencysymbol').val('');
                            $('#currencyrate').val('');
                            $('#deletebtn').hide();
                            $('#currencyrow'+currencyid).hide();
                        }
                    },
                    error: function(error) {
                        console.error('Error deleting the item', error);
                    }
                });
                
            } else {
           
            }
        });
                
        
            
    }
    
}

function showIconModal() {
    $('#iconModal').modal('show');
}

function closeModal() {
    $('#iconModal').modal('hide');
}




function updateCurrency(currencyid) {
    if (currencyid > 0) {

        var currencyname = $('#currencyname' + currencyid).val();
        var currencysymbol = $('#currencysymbol' + currencyid).val();
        var currencyrate = $('#currencyrate' + currencyid).val();
        
        if (currencyname=="" ||  currencysymbol=='' || currencyrate=="" || currencyrate==0) {
           Swal.fire({
                    icon: 'error',
                    text: 'Please add all the mandatory fields.',
                    width: '300px',
                    customClass: {
                        title: 'swal-title'
                    },
                    showConfirmButton: false,
                    timer: 2000,
                });
            return;    
        }
        
        LoadingStart();
        $.ajax({
            type: 'put',
            url: '{{ route('updateCurrencyRow', '') }}/' + currencyid,
            data: {
                currencyname: currencyname,
                currencysymbol: currencysymbol,
                currencyrate: currencyrate,
            },
            success: function(response) {
               console.log(response);
               LoadingStop();
            },
            error: function(error) {
                console.error('Error updating the currency', error);
                 LoadingStop();
            }
        });    
    } 
}

</script>

@endsection