@extends('layouts.admin')
@section('content')
    @include('components.admin.header')
    @include('components.admin.nav')
    @push('styles')
        <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/dataTables.bootstrap5.min.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.9/css/responsive.bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.2/css/buttons.dataTables.min.css">
        <link href="{{ asset('admin/assets/libs/sweetalert2/sweetalert2.min.css') }}" rel="stylesheet" type="text/css" />
    @endpush
    <div class="main-content">
        <div class="page-content">
            <div class="container-fluid">
                <!-- start page title -->
                <div class="row">
                    <div class="col-12">
                        <div class="page-title-box d-sm-flex align-items-center justify-content-between">
                            <h4 class="mb-sm-0">Purchase Types</h4>
                            <div class="page-title-right">
                                <ol class="breadcrumb m-0">
                                    <li class="breadcrumb-item"><a href="{{ route('admin.home') }}">Dashboard</a></li>
                                    <li class="breadcrumb-item active">Purchase Types</li>
                                </ol>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-start gap-3">
                                <button class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#addPurchaseType">Add Purchase Type</button>
                            </div>
                            <div class="card-body">
                                <table id="datatable" class="table table-striped table-bordered dt-responsive nowrap"
                                    style="border-collapse: collapse; border-spacing: 0; width: 100%;">
                                    <thead>
                                        <tr>
                                            <th>Platform</th>
                                            <th>Purchase Types</th>
                                            <th>Pricings</th>
                                            <th>Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        @foreach ($purchaseTypes as $purchaseType)
                                            <tr>
                                                <td>{{$purchaseType->platform->name}}</td>
                                                <td>{{$purchaseType->name}}</td>
                                                <td>
                                                    @forelse ($purchaseType->pricings as $pricing)
                                                        <form action="{{url('admin/update/platformtypes/pricing/'.$pricing->id)}}" method="POST">
                                                            @csrf
                                                            <div class="d-flex justify-content-start gap-2 mb-2">
                                                                <input type="text" class="form-control" placeholder="Quantity" value="{{$pricing->quantity}}" name="quantity">

                                                                <div class="input-group mb-0">
                                                                    <span class="input-group-text" id="price">$</span>
                                                                    <input type="text" class="form-control" placeholder="Price" aria-label="Price" aria-describedby="price" value="{{$pricing->price}}" name="price">
                                                                </div>
                                                                <button class="btn btn-sm btn-success"><span class=" ri-edit-line"></span></button>
                                                                <a href="{{url('admin/delete/pricing/'.$pricing->id)}}" class="btn btn-sm btn-danger d-flex align-items-center" id="delete"><span class="ri-delete-bin-line"></span></a>
                                                            </div>
                                                        </form>
                                                    @empty
                                                        <span class="badge bg-danger">No Pricings</span>
                                                    @endforelse
                                                    <div class="mt-3 pt-2 border-top">
                                                        <form action="{{url('admin/add/pricing')}}" method="POST">
                                                            @csrf
                                                            <div class="d-flex justify-content-start gap-2 mt-2">
                                                                <input type="hidden" class="form-control" value="{{$purchaseType->platform->id}}" name="platformId">
                                                                <input type="hidden" class="form-control" value="{{$purchaseType->id}}" name="purchaseTypeId">
                                                                <input type="text" class="form-control" placeholder="Quantity" value="" name="quantity">
    
                                                                <div class="input-group mb-0">
                                                                    <span class="input-group-text" id="price">$</span>
                                                                    <input type="text" class="form-control" placeholder="Price" aria-label="Price" aria-describedby="price" value="" name="price">
                                                                </div>
                                                                <button class="btn btn-sm btn-info">Add</button>
                                                            </div>
                                                        </form>
                                                    </div>
                                                </td>
                                                <td style="text-align: right; vertical-align: middle">
                                                    <div class="d-flex flex-column gap-2">
                                                        <a class="btn btn-sm btn-info" href="#" data-bs-toggle="modal" data-bs-target="#editPurchaseType" id="{{$purchaseType->id}}" onclick="editPurchasetype(this.id)">Edit</a>
                                                        <a class="btn btn-sm btn-danger" id="delete" href="{{url('admin/delete/purchaseType/'.$purchaseType->id)}}">Delete</a>
                                                    </div>
                                                </td>
                                            </tr>
                                        @endforeach
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <!--end col-->
                </div>
                <!--end row-->
                <!-- end page title -->
            </div>
            <!-- container-fluid -->
        </div>
        @include('components.admin.footer')
    </div>

    {{-- Add purchase type --}}
    <div id="addPurchaseType" class="modal fade" tabindex="-1" aria-labelledby="addPurchaseTypeLabel" data-bs-backdrop="static" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addPurchaseTypeLabel">Add Purchase Type</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
                </div>
                <form id="purchase-type-form" method="POST">
                    @csrf
                    <div class="modal-body">
                            <div class="mb-3">
                                <label for="purchaseTypeName" class="form-label">Purchase Type</label>
                                <input type="text" class="form-control" id="purchaseTypeName" name="purchaseTypeName">
                                <small id="purchase_type_name_error" class="text-danger"></small>
                            </div>
                            <div>
                                <label for="purchaseTypePlatform" class="form-label">Select Platform</label>
                                <select class="form-control" name="purchaseTypePlatform" id="purchaseTypePlatform">
                                    @foreach ($platforms as $platform)
                                    <option value="{{$platform->id}}">{{$platform->name}}</option>
                                    @endforeach
                                </select>
                                <small id="platform_error" class="text-danger"></small>
                            </div>
                            <span id="error-message"></span>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="button" id="submit-button" class="btn btn-primary ">Save Changes</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    {{-- Add purchase type --}}
    <div id="editPurchaseType" class="modal fade" tabindex="-1" aria-labelledby="editPurchaseTypeLabel" data-bs-backdrop="static" aria-hidden="true" style="display: none;">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editPurchaseTypeLabel">Edit Purchase Type</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"> </button>
                </div>
                <form id="purchase-type-edit-form" method="POST">
                    @csrf
                    <div class="modal-body">
                            <div class="mb-3">
                                <label for="editpurchaseTypeName" class="form-label">Purchase Type</label>
                                <input type="text" class="form-control" id="editpurchaseTypeName" name="editpurchaseTypeName">
                                <small id="edit_purchase_type_name_error" class="text-danger"></small>
                            </div>
                            <div>
                                <label for="editpurchaseTypePlatform" class="form-label">Select Platform</label>
                                <select class="form-control" name="editpurchaseTypePlatform" id="editpurchaseTypePlatform">
                                    
                                </select>
                                <small id="edit_platform_error" class="text-danger"></small>
                            </div>
                            <span id="edit-error-message"></span>
                            <input type="hidden" name="" id="purchaseTypeEditInput">
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-light" data-bs-dismiss="modal">Close</button>
                        <button type="button" id="edit-submit-button" class="btn btn-primary ">Save Changes</button>
                    </div>
                </form>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->


    @push('scripts')
        <!--datatable js-->
        <script src="{{ asset('admin/assets/js/jquery.dataTables.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/dataTables.bootstrap5.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/dataTables.responsive.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/dataTables.buttons.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/buttons.print.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/buttons.html5.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/pdfmake.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/vfs_fonts.js') }}"></script>
        <script src="{{ asset('admin/assets/js/jszip.min.js') }}"></script>
        <script src="{{ asset('admin/assets/js/pages/datatables.init.js') }}"></script>
        <script src="{{ asset('admin/assets/libs/sweetalert2/sweetalert2.min.js') }}"></script>
        
        <script type="text/javascript">
            $(document).on("click", "#delete", function(e) {
                e.preventDefault();
                var link = $(this).attr("href");
                Swal.fire({
                    title: "Are you sure?",
                    text: "You won't be able to revert this!",
                    icon: "question",
                    allowOutsideClick: false,
                    showCancelButton: true,
                    confirmButtonText: "Yes, delete it!",
                    cancelButtonText: "No, cancel!",
                    reverseButtons: true,
                }).then(function(result) {
                    if (result.value) {
                        window.location.href = link;
                        // result.dismiss can be "cancel", "overlay",
                        // "close", and "timer"
                    } else {
                        Swal.fire({
                            icon: "success",
                            title: "Action Cancelled",
                            showConfirmButton: false,
                            timer: 1000,
                        });
                    }
                });
            });
        </script>

        <script>
            $(document).ready(function () {
                $('#submit-button').click(function (e) {
                    e.preventDefault();

                    var purchaseTypeName = $('#purchaseTypeName').val();
                    var purchaseTypePlatform = $('#purchaseTypePlatform').val();

                    // Create a data object with the form values
                    var data = {
                        purchaseTypeName: purchaseTypeName,
                        purchaseTypePlatform: purchaseTypePlatform,
                    };

                    $.ajaxSetup({
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    });

                    $.ajax({
                        type: 'POST',
                        url: '/admin/store/purchaseType',
                        data: JSON.stringify(data),
                        contentType: 'application/json',
                        dataType: 'json',
                        success: function (data) {
                            window.location.reload();
                        },
                        error: function (xhr) {
                            // Display error messages separately for each field
                            if (xhr.responseJSON) {
                                if (xhr.responseJSON.errors) {
                                    var errors = xhr.responseJSON.errors;
                                    $('#purchase_type_name_error').html(errors.purchaseTypeName ? errors.purchaseTypeName[0] : '');
                                    $('#platform_error').html(errors.purchaseTypePlatform ? errors.purchaseTypePlatform[0] : '');
                                } else {
                                    $('#error-message').html(xhr.responseJSON.message);
                                }
                            }
                        },
                    });

                    return false;
                });
            });
        </script>
        <script>
            $(document).ready(function () {
                $('#addPurchaseType').on('hidden.bs.modal', function (e) {
                    $('#purchase_type_name_error').html('');
                })                
            });
        </script>
        <script>
            function editPurchasetype(id) {
                $.ajax({
                    url: '/admin/edit/purchaseType',
                    method: 'GET',
                    data: {
                        id: id
                    },
                    dataType: 'JSON',

                    success: function(response) {
                        $('#editpurchaseTypeName').val(response.purchaseTypeName)
                        $('#purchaseTypeEditInput').val(response.purchaseType)
                        $('#editpurchaseTypePlatform').empty(); // Clear the select box
                        $.each(response.platforms, function (key, value) {
                        var option = $('<option></option>')
                            .attr('value', value.id)
                            .text(value.name);
                        if (value.id === response.purchaseTypePlatform) {
                            option.attr('selected', 'selected');
                        }
                        $('#editpurchaseTypePlatform').append(option);
                    });
                    },
                });
            }
        </script>

<script>
    $(document).ready(function () {
        $('#edit-submit-button').click(function (e) {
            e.preventDefault();

            var purchaseTypeName = $('#editpurchaseTypeName').val();
            var purchaseTypePlatform = $('#editpurchaseTypePlatform').val();
            var purchaseTypeEditInput = $('#purchaseTypeEditInput').val();

            // Create a data object with the form values
            var data = {
                purchaseTypeName: purchaseTypeName,
                purchaseTypePlatform: purchaseTypePlatform,
                purchaseTypeEditInput: purchaseTypeEditInput,
            };

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $.ajax({
                type: 'POST',
                url: '/admin/update/purchaseType',
                data: JSON.stringify(data),
                contentType: 'application/json',
                dataType: 'json',
                success: function (data) {
                    window.location.reload(); 
                },
                error: function (xhr) {
                    // Display error messages separately for each field
                    if (xhr.responseJSON) {
                        if (xhr.responseJSON.errors) {
                            var errors = xhr.responseJSON.errors;
                            $('#edit_purchase_type_name_error').html(errors.purchaseTypeName ? errors.purchaseTypeName[0] : '');
                            $('#edit_platform_error').html(errors.purchaseTypePlatform ? errors.purchaseTypePlatform[0] : '');
                        } else {
                            $('#edit-error-message').html(xhr.responseJSON.message);
                        }
                    }
                },
            });

            return false;
        });
    });
</script>
    @endpush
@endsection