@extends('app.dashboard')

@section('content')
<style>
        .form-container {
            width: 60%;
            margin: auto;
        }

        .card {
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .card h3 {
            /* margin-bottom: 20px;
            font-size: 18px;
            border-bottom: 1px solid #ddd;
            padding-bottom: 10px; */
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            font-weight: bold;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="file"],
        .color-box {
            display: block;
            width: 100%;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        .color-box {
            height: 30px;
            background-color: #5cb85c; /* The green color */
        }

        /* .checkbox-group {
            margin-bottom: 10px;
        } */

        /* .submit-btn {
            text-align: right;
            margin-top: 20px;
        } */

        #image{
            width: 120px;
            height: 60px;
        }

    </style>

    <div class=" page-content pr-5 pl-5 mt-5 pt-3 ">
        <div class="card ">
                <form id="branch-form" method="POST" enctype="multipart/form-data">
                @csrf
                <h3>Branch</h3>
                <div class="form-group row mb-0 pb-0">
                <input type="hidden" id="id" name="id">
                    <div class="form-group col-3">
                        <label for="branch-name">Branch Name <span style="color:red;">*</span></label>
                        <input type="text" id="branch-name" name="branch_name" placeholder="Enter Branch Name" required>
                    </div>                 
                    <div class="form-group col-2 mb-0 pb-0 mt-3">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="default-logo" name="default_logo">
                        <label class="form-check-label" for="default-logo">Default Proplogix Logo</label>
                    </div>
                    
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="is-address" name="is_address">
                        <label class="form-check-label" for="is-address">Is Address</label>
                    </div>
                </div>

                    <div class="form-group col-3 branch-logo-field">
                        <label for="branch-logo">Branch Logo</label>
                        <input type="file" id="branch-logo" name="branch_logo" accept="image/png, image/jpeg">
                        <div class="logo d-none m-2" >
                        <img id="image" src="" >
                        </div>
                       
                    </div>

                    <div class="form-group col-3">
                        <label for="branch-color">Color</label>
                        <input type="color" name="color_code" id="color_code" class="form-control" value="#4cb97f">
                    </div>
                </div>

                <div class="m-1 ">
                    
                <div class="d-flex row">
                        <div class="col-3 d-flex align-items-center">
                            <input type="checkbox" id="is-active" name="is_active">
                            <label for="is-active" class="ml-2">Is Active</label>
                        </div>          
                            <div class="col-3 address-field d-none">
                                <label for="address1">Address Line 1</label>
                                <input type="text" id="address1" name="address1">
                            </div>
                            
                            <div class="col-3 address-field d-none">
                                <label for="address2">Address Line 2</label>
                                <input type="text" id="address2" name="address2">
                            </div>

                            <div class="col-3 address-field d-none">
                                <label for="address3">Address Line 3</label>
                                <input type="text" id="address3" name="address3">
                            </div>
                    </div>
                    <div class="mt-2"><input type="submit" name="submit" value="Submit" id="submit" class="btn btn-sm btn-success"></div>          
                </div>
            </form>      
                <div class="mb-5 mt-5">
                    <table class="table table-bordered" id="branches-table">
                        <thead>
                            <tr>
                                <th>S.No</th>
                                <th>Branch Name</th>
                                <!-- <th>Branch API ID</th> -->
                                <th>Logo</th>
                                <th>Color Code</th>
                                <th>Active/Disabled</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                        </tbody>
                </table>
                </div>
  

            </div>

    </div>

    <script type="text/javascript">
    $(document).ready(function(){
    
        $('#is-address').on('change', function() {
            if ($(this).is(':checked')) {
                $('.address-field').removeClass('d-none');
                // $('.branch-logo-field').addClass('d-none');  
            } else {
                $('.address-field').addClass('d-none');  
                $('.branch-logo-field').removeClass('d-none'); 
            }
        });

        $('#default-logo').on('change', function() {
            if ($(this).is(':checked')) {
               
                $('.branch-logo-field').addClass('d-none');  
            } else { 
                $('.branch-logo-field').removeClass('d-none'); 
            }
        });

        $('#branches-table').DataTable({
            processing: true,
            serverSide: true,
            ajax: '{{ route('branchgetData') }}',
            columns: [
                { data: 'DT_RowIndex', name: 'DT_RowIndex', orderable: false, searchable: false },
                { data: 'branch_name', name: 'branch_name' },
                { data: 'branch_logo', name: 'branch_logo', orderable: false, searchable: false },
                { 
                    data: 'color_code', 
                    name: 'color_code',
                    render: function(data, type, row) {
                        return '<div style="background-color: ' + data + '; width: 110px; height: 20px; margin: 0 auto; display: flex; align-items: center; justify-content: center;"></div>';
                    }
                },
                { data: 'is_active', name: 'is_active' },
                { data: 'action', name: 'action', orderable: false, searchable: false },
            ],
            // Add this to ensure proper encoding in DataTables
            language: {
                zeroRecords: "No records found",
                info: "Showing _START_ to _END_ of _TOTAL_ entries",
                infoEmpty: "No entries",
                infoFiltered: "(filtered from _MAX_ total entries)"
            }
        });

        $('#branch-form').on('submit', function(event) {
        event.preventDefault(); // Prevent the default form submission

        // Create a FormData object to handle file uploads
        var formData = new FormData(this);

        // Convert checkbox states to boolean values
        formData.set('is_active', $('#is-active').is(':checked') ? '1' : '0');
    formData.set('is_address', $('#is-address').is(':checked') ? '1' : '0');
    formData.set('default_logo', $('#default-logo').is(':checked') ? '1' : '0');

            $.ajax({
                url: 'branchestore', // URL to the route handling form submission
                type: 'POST',
                data: formData,
                contentType: false, // Tell jQuery not to set content type
                processData: false, // Tell jQuery not to process data
                success: function(response) {
                    $("#branch-form")[0].reset();
                    $('#branches-table').DataTable().ajax.reload();
                    $('.logo').addClass('d-none');
                    Swal.fire({
                title: 'Success!',
                text: 'Branch Created successfully.',
                icon: 'success',
                timer: 500, // Duration in milliseconds (2 seconds)
                showConfirmButton: false // Hide the confirm button
            });
                    
                },
                error: function(xhr) {
                    // Handle errors
                    var errors = xhr.responseJSON.errors;
                    var errorMessages = '';
                    $.each(errors, function(key, value) {
                        errorMessages += value[0] + '\n'; // Concatenate error messages
                    });
                    alert('Error(s):\n' + errorMessages);
                }
            });
        });
        
    });

    $(document).on('click', '.edit-btn', function() {
     var branchId = $(this).data('id');

        $.ajax({
            url: '/branch/' + branchId, // Adjust the URL according to your route
            method: 'GET',
            success: function(data) {
                if (data.branch) {

                 $('#id').val(data.branch.id || '');
                $('#branch-name').val(data.branch.branch_name || '');
                $('#color_code').val(data.branch.color_code || '');
                $('#is-active').prop('checked', data.branch.is_active == 1);
                $('#is-address').prop('checked', data.branch.is_address == 1);
                $('#default-logo').prop('checked', data.branch.is_default == 1);
                $('#address1').val(data.branch.address_line1 || '');
                $('#address2').val(data.branch.address_line2 || '');
                $('#address3').val(data.branch.address_line3 || '');
                }
                // Set the image source if imageBase64 exists
                if (data.imageBase64) {
                    $('#image').attr('src', 'data:image/jpeg;base64,' + data.imageBase64);
                    $('.logo').removeClass('d-none');
                } else {
                    $('.logo').addClass('d-none');
                }
            // console.log(data.imageBase64);
                if (data.branch.is_address) {
                    $('.address-field').removeClass('d-none');
                } else {
                    $('.address-field').addClass('d-none');
                }
                if (data.branch.is_default) {
                    $('.branch-logo-field').addClass('d-none');
                } else {
                    $('.branch-logo-field').removeClass('d-none');
                }

                
            }
        });
    });
</script>
@endsection