@extends('admin.layouts')

@section('title', 'Edit Branch Admin')

@section('content')
       <div class="col-lg-12">
                    <h5 class="mb-0"> <button type="button" class="btn btn-icon bg-white me-2" style="box-shadow: 0px 9px 12px -2px #66328E1F;">
                    <a href="{{ route('edit_branch') }}">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                            stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
                            class="icon icon-tabler">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                            <path d="M15 6l-6 6l6 6" />
                        </svg>
                    </a>
                </button>Edit Branch Admin</h5>
<div class="container-fluid page-wrapper category-container">



    <div class="row mt-3">
        <div class="col-lg-12">

            <div class="card ILY-form-card">
                <div class="card-body">

                    <form id="editForm" enctype="multipart/form-data">
                        @csrf


                        <div class="row">

                            {{-- Name --}}
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Name</label>
                                <input type="text" class="form-control" id="edit_name"
                                       name="name" required>
                            </div>

                            {{-- Prefix --}}
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Prefix</label>
                                <input type="text" class="form-control" id="edit_prefix"
                                       name="prefix" required>
                            </div>

                            {{-- User ID --}}
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">User ID</label>
                                <input type="text" class="form-control" id="edit_userId"
                                       name="user_id" readonly>
                            </div>

                            {{-- Email --}}
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Email</label>
                                <input type="email" class="form-control" id="edit_email"
                                       name="email" required>
                            </div>

                            {{-- Password --}}
                         <div class="col-lg-6 mb-3 position-relative">
                                <label class="form-label">Password</label>
                                <input type="password" class="form-control" name="password" id="add_password" required>
                                <i class="fa fa-eye position-absolute end-0 top-50 translate-middle-y me-4 mt-3"
                                   id="toggleAddPassword" style="cursor:pointer;"></i>
                            </div>

                            {{-- Phone --}}
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Phone</label>
                                <input type="text" class="form-control" id="edit_phone"
                                       name="phone_number" required>
                            </div>

                            {{-- Address --}}
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Address</label>
                                <input type="text" class="form-control" id="edit_building_name"
                                       name="building_name">
                            </div>

                            {{-- Logo --}}
                            <div class="col-lg-6 mb-3">
                                <label class="form-label">Logo</label>
                                <input type="file" class="form-control" name="logo">
                                <div class="mt-2">

                                        <img src=""
                                             id="edit_logo_preview"
                                             width="100">

                                </div>
                            </div>

                            {{-- Buttons --}}
                            <div class="col-lg-12 mt-4 d-flex justify-content-center gap-3">
                                <button type="submit" class="btn btn-success">Update</button>
                                <a href="#" class="btn btn-secondary">Cancel</a>
                            </div>

                        </div>
                    </form>

                </div>
            </div>

        </div>
    </div>

</div>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>

        $(function() {

            $('#toggleAddPassword').click(function() {

                const input = $('#add_password');

                const type = input.attr('type') === 'password' ? 'text' : 'password';

                input.attr('type', type);

                $(this).toggleClass('fa-eye fa-eye-slash');

            });

            $('#toggleEditPassword').click(function() {

                const input = $('#edit_password');

                const type = input.attr('type') === 'password' ? 'text' : 'password';

                input.attr('type', type);

                $(this).toggleClass('fa-eye fa-eye-slash');

            });

            $(document).on('click', '.editBtn', function() {

                $('#edit_id').val($(this).data('id'));

                $('#edit_name').val($(this).data('name'));
                    $('#edit_prefix').val($(this).attr('data-prefix')); // ✅ FIX


                $('#edit_userId').val($(this).data('userid'));

                $('#edit_email').val($(this).data('email'));

                $('#edit_phone').val($(this).data('phone'));

                $('#edit_building_name').val($(this).data('building'));

                let passwordHint = $(this).data('passwordhint') || '';

                $('#edit_password').val(passwordHint).attr('data-hint', 'true');

                let logo = $(this).data('logo');

                if (logo) {

                    $('#edit_logo_preview').attr('src', logo).show();

                } else {

                    $('#edit_logo_preview').hide();

                }

                $('#editModal').modal('show');

            });

            $(document).on('focus', '#edit_password', function() {

                if ($(this).attr('data-hint') === 'true') {

                    $(this).val('').removeAttr('data-hint');

                }

            });

            $('#addForm').submit(function(e) {

                e.preventDefault();

                let formData = new FormData(this);

                $.ajax({

                    url: "{{ route('branch-admin.store') }}",

                    type: 'POST',

                    data: formData,

                    processData: false,

                    contentType: false,

                    success: function(res) {

                        if (res.success) {

                            alert(res.message);

                            location.reload();

                        } else {

                            alert("Something went wrong!");

                        }

                    },

                    error: function(err) {

                        console.log(err);

                        alert("Error saving!");

                    }

                });

            });

            $('#editForm').submit(function(e) {

                e.preventDefault();

                let id = $('#edit_id').val();

                let formData = new FormData(this);

                const passwordField = $('#edit_password');

                if (passwordField.attr('data-hint') === 'true') {

                    formData.delete('password');

                }

                $.ajax({

                    url: "{{ route('branch-admin.update', ':id') }}".replace(':id', id),

                    type: 'POST',

                    data: formData,

                    processData: false,

                    contentType: false,

                    success: function(res) {

                        if (res.success) {

                            alert(res.message);

                            location.reload();

                        } else {

                            alert("Update failed!");

                        }

                    },

                    error: function(err) {

                        console.log(err.responseJSON);

                        alert(err.responseJSON?.message || "Error updating!");

                    }

                });

            });

        });

    </script>

@endsection