@extends('layouts.master')

@push('plugin-styles')
  <link href="{{ asset('theme_v2/assets/plugins/flatpickr/flatpickr.min.css') }}" rel="stylesheet" />
  <link rel="stylesheet" href="{{ asset('theme/css/daterangepicker.css') }}">
@endpush

@section('content')
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                Company
            </div>
            <div class="card-body">
                <table id="company-table" class="table">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Company Name</th>
                            <!-- <th>Company Code</th> -->
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- Dynamic data will be inserted here -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                Create Company
            </div>
            <div class="card-body">
            <form id="company-form">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="company-name">Company Name</label>
                        <input type="text" id="company-name" name="company_name" class="form-control" required>
                    </div>
                    <div class="form-group">
                        <label for="company-code">Company Code</label>
                        <input type="text" id="company-code" name="code" class="form-control" required>
                    </div>
                </div>
                <div class="modal-footer mt-3">
                    <button type="submit" class="btn btn-primary">Save Company</button>
                </div>
            </form>
            </div>
        </div>
    </div>
</div>

@endsection

@push('plugin-scripts')
  <script src="{{ asset('theme_v2/assets/plugins/flatpickr/flatpickr.min.js') }}"></script>
  <script src="{{ asset('theme_v2/assets/plugins/apexcharts/apexcharts.min.js') }}"></script>
  <script src="{{ asset('theme/js/daterangepicker.js') }}"></script>
@endpush

@push('custom-scripts')
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

<script>
    $(document).ready(function() {
        // Fetch company data when the page loads
        axios.get('/api/companies')
            .then(function (response) {
                let companies = response.data;
                let tableBody = $('#company-table tbody');

                companies.forEach((company, index) => {
                    tableBody.append(`
                        <tr>
                            <td>${index + 1}</td>
                            <td>${company.company_name}</td>
                            <td>
                                <button class="btn btn-sm btn-primary">Edit</button>
                                <button class="btn btn-sm btn-danger">Delete</button>
                            </td>
                        </tr>
                    `);
                });
            })
            .catch(function (error) {
                console.log(error);
            });

        // Handle form submission
        $('#company-form').on('submit', function(e) {
            e.preventDefault();

            let formData = {
                company_name: $('#company-name').val(),
                code: $('#company-code').val(),
            };

            // Submit form data using Axios
            axios.post('/api/companies-save', formData)
                .then(function(response) {
                    // Show success message
                    Swal.fire('Success', 'Company created successfully!', 'success');

                    // Reload the company table data
                    $('#company-table tbody').append(`
                        <tr>
                            <td>${response.data.id}</td>
                            <td>${response.data.company_name}</td>
                            <td>
                                <button class="btn btn-sm btn-primary">Edit</button>
                                <button class="btn btn-sm btn-danger">Delete</button>
                            </td>
                        </tr>
                    `);

                    // Close the modal
                    $('#createCompanyModal').modal('hide');

                    // Reset the form
                    $('#company-form')[0].reset();
                })
                .catch(function(error) {
                    // Show error message
                    Swal.fire('Error', 'Failed to create company.', 'error');
                    console.log(error);
                });
        });
    });
</script>
@endpush